변형관련 스타일

<h1>2차원 변형</h1>

    <h3>좌우로 움직이기</h3>
    <img src="./src/돈1.jpg" alt="" class="trans-x-2d">

    <h3>상하로 움직이기</h3>
    <img src="./src/돈2.jpg" alt="" class="trans-y-2d">

    <h3>대각선 움직이기</h3>
    <img src="./src/돈3.jpg" alt="" class="trans-d-2d">

    <h3>가로 방향 확대/축소</h3>
    <img src="./src/돈4.jpg" alt="" class="trans-x-scale-2d">
    
    <h3>세로 방향 확대/축소</h3>
    <img src="./src/돈5.jpg" alt="" class="trans-y-scale-2d">

    <h3>요소 확대/축소(대각선)</h3>
    <img src="./src/돈6.jpg" alt="" class="trans-scale-2d">

    <h3>요소 회전</h3>
    <img src="./src/돈1.jpg" alt="" class="trans-rotate">

    <hr>

    <h1>3차원 변형</h1>

    <h3>x, y, z축 이동</h3>
    <img src="./src/돈2.jpg" alt="" class="trans-3d">

    <h3>x축 회전</h3>
    <img src="./src/돈3.jpg" alt="" class="trans-rotate-x-3d">

    
    <h3>y축 회전</h3>
    <img src="./src/돈4.jpg" alt="" class="trans-rotate-y-3d">

    
    <h3>z축 회전</h3>
    <img src="./src/돈5.jpg" alt="" class="trans-rotate-z-3d">

    <h3>x, y, z축 회전</h3>
    <img src="./src/돈6.jpg" alt="" class="trans-rotate-3d">

    <hr>

    <h1>변형 사이에 지연시간 추가하기(transition)</h1>

    <div class="box test1"></div>
    <hr>

    <div class="box test2">여기가 위쪽</div>
    <hr>

    <h4>스타일 변형 진행 속도 조정</h4>
    <div class="box test3">여기가 위쪽</div>
    <hr>

    <h4>스타일 변형 딜레이(일정 시간 후 변형)</h4>
    <div class="box test4">여기가 위쪽</div>
    <hr>