hyungju-lee

22. creating a perspective playground

내용

이 섹션에서는 Vue.js를 사용하여 3D 상자의 여러 속성을 조작하는 도구를 만들고 실습합니다.
시작 파일은 리소스 섹션에 제공되며, 다운로드하고 압축 해제한 후 편집기를 프로젝트에 연결해야 합니다.
프로젝트를 열면 왼쪽에 상자의 다양한 속성을 변경할 수 있는 입력 필드가 있으며, 오른쪽에 상자의 모양을 표현하는 재미있는 애니메이션이 있습니다.
목표는 실시간으로 변경된 속성을 적용하고 슬라이더를 이동할 때마다 상자가 이동하는 것을 확인하는 것입니다.

먼저 HTML 파일을 살펴보면 시작 지점으로 제공된 스타일이 있지만 특별한 내용은 없습니다.
본문 태그 내에는 "app" 클래스가 있는 div 태그가 있으며, 여기에 Vue 인스턴스가 마운트됩니다.
이 div 요소 내에는 여러 속성을 변경하는 데 사용되는 레이블과 입력 필드 쌍이 있습니다.
입력 필드는 박스의 여러 속성을 변경하며 숫자 값을 입력하기 위해 레인지 입력 유형을 사용합니다.
그 아래에는 상자의 현재 값을 표시하는 레이블도 있습니다.
레이블 및 입력 필드는 현재로서 상자와 연결되어 있지 않습니다.

이제 Vue를 사용하여 입력 필드와 상자의 속성을 연결합니다.
Vue 인스턴스를 생성하고 데이터 속성을 만들어 각 입력 필드와 연결합니다.
각 입력 필드는 V-model 지시문을 사용하여 연결하고 레이블을 동적으로 업데이트합니다.
또한 두 개의 버튼을 추가하고 버튼 클릭 이벤트를 처리하는 방법을 구현합니다.

마지막으로 상자의 스타일을 바인딩하고 상자의 속성을 Vue의 계산된 속성을 사용하여 업데이트합니다.
이렇게 하면 상자의 모양이 실시간으로 변경됩니다.
또한 "리셋" 버튼을 클릭하여 속성을 초기값으로 재설정할 수 있습니다.

이제 브라우저에서 애플리케이션을 테스트하여 입력 필드를 조작하면 오른쪽의 상자가 실시간으로 변경되는 것을 확인할 수 있습니다.
"리셋" 버튼을 클릭하여 속성을 초기값으로 재설정할 수 있습니다.
이제 속성을 사용자의 클립보드에 복사하는 버튼을 다음 강의에서 처리할 예정입니다.

index.html
<!DOCTYPE>
<html>

<head>
    <title>CSS3 Perspective Playground</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div id="app">
    <h2>CSS3 Perspective Playground</h2>
    <main>
        <section class="settings">
            <div class="settings-container">
                <label>perspective: {{ perspective }}px;</label>
                <input type="range" min="0" max="999" v-model="perspective" />

                <label>rotateX: {{ rotateX }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateX" />

                <label>rotateY: {{ rotateY }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateY" />

                <label>rotateZ: {{ rotateZ }}deg; </label>
                <input type="range" min="-180" max="180" v-model="rotateZ" />

                <button type="button" @click.prevent="reset">Reset</button>
                <button type="button">Copy</button>
            </div>
        </section>
        <section class="output">
            <div class="box-container">
                <div class="box" :style="box"></div>
            </div>
        </section>
    </main>

</div>

<css-doodle>
    :doodle {
    @grid: 1x3 / 100vmax;
    position: absolute;
    top: 0; left: 0;
    z-index: 0;
    }

    @size: 100% 150%;
    position: absolute;

    background: @m(100, (
    linear-gradient(transparent, @p(
    #FFFDE1@repeat(2, @p([0-9a-f])),
    #FB3569@repeat(2, @p([0-9a-f]))
    ))
    @r(0%, 100%) @r(0%, 100%) /
    @r(1px) @r(23vmin)
    no-repeat
    ));

    will-change: transform;
    animation: f 50s linear calc(-50s / @size() * @i()) infinite;
    @keyframes f {
    from { transform: translateY(-100%) }
    to { transform: translateY(100%) }
    }
</css-doodle>

<script src="https://unpkg.com/css-doodle@0.6.1/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.9/vue.global.min.js"></script>
<script src="app.js"></script>
</body>

</html>