transform : 변형

1. 2차원 변형 함수

기본형 transform : 변형함수;

2차원 변형은 x 축과 y 축을 기준으로 하여 수평 또는 수직으로 이동하거나 회전하는 것을 말한다.

x 축과 y 축의 기준이 되는 원점은 별도의 지정이 없으면 top 0, left 0 에 위치해 있다.

즉 x 축은 오른쪽으로 갈수록 그 값이 커지고, 왼쪽으로 갈수록 그 값이 작아진다.

y 축은 아래로 갈수록 커지고, 위로 갈수록 작아진다.

크기 관련 변형 함수
1️⃣ scale(x, y) : x 축과 y 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다. 원본은 1이 기준이다.
2️⃣ scaleX(x) : x 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다.
3️⃣ scaleY(y) : y 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소된다.

위치 관련 변형 함수
1️⃣ translate(x, y) : x 축(수평)과 y 축(수직)에 지정한 크기만큼을 거리로 하여 이동한다.
2️⃣ translateX(x) : x 축에 지정한 크기만큼을 거리로 하여 이동한다.
3️⃣ translateY(y) : y 축에 지정한 크기만큼을 거리로 하여 이동한다.

회전 관련 변형 함수
1️⃣ rotate(각도deg) : z 축을 기준으로 지정한 각도만큼 회전한다. 기준점은 대상의 가운데이다.

비틀기 관련 변형 함수
1️⃣ skew(x 각도deg, y 각도deg) : x 축과 y 축에 지정한 각도만큼 왜곡된다.
2️⃣ skewX(x 각도deg) : x 축에 지정한 각도만큼 왜곡된다.
3️⃣ skewY(y 각도deg) : y 축에 지정한 각도만큼 왜곡된다.

2. 3차원 변형 함수

2차원 함수와 동일하게 사용하며 z 축이 추가되었다.

z 축은 z-index 속성을 기억하면 쉽다.

즉 요소가 앞으로 또는 뒤로 이동하는지에 대한 축이다.

이로 인하여 원근감이 표현될 수 있는데, 앞 쪽으로 올수록 값은 커지고 뒤 쪽을 갈수록 값은 작아진다.

크기 관련 변형 함수
1️⃣ scale3d(x, y, z) : x 축, y 축, z 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소한다.
2️⃣ scaleZ(z) : z 축에 지정한 크기만큼을 배율로 하여 확대 또는 축소한다.

위치 관련 변형 함수
1️⃣ translate3d(x, y, z) : x 축, y 축, z 축에 지정한 크기만큼을 거리로 하여 이동한다.
2️⃣ translateZ(z) : z 축에 지정한 크기만큼을 거리로 하여 이동한다.

회전 관련 변형 함수
1️⃣ rotate3d(x deg, y deg, z deg) : 각 축에 지정한 크기만큼을 각도로 하여 회전한다.
2️⃣ rotateX(x deg) : x 축에 지정한 크기만큼을 각도로 하여 회전한다.
3️⃣ rotateY(y deg) : y 축에 지정한 크기만큼을 각도로 하여 회전한다.
4️⃣ rotateZ(z deg) : z 축에 지정한 크기만큼을 각도로 하여 회전한다.

입체감 관련 변형 함수
1️⃣ perspective(길이) : 입체적으로 보일 수 있는 깊이 값을 지정한다.

3. translate 변형 함수 : 요소 위치 이동시키기

translate 변형 함수를 사용하면 축의 방향으로 이동하게 된다.

    <style>
        .origin {
            border: 1px solid; 
            float: left; 
            margin: 30px;
        }
        div img {
            width: 300px;
            height: 200px;
        }
        .movex:hover {
            transform: translateX(50px);
        }
        .movey:hover {
            transform: translateY(20px);
        }
        .movexy:hover {
            transform: translate(10px, 20px);
        }
        .movez:hover {
            transform: translateZ(30px);
        }
        .move3d:hover {
            transform: translate3d(10px, 20px, 30px);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="movex">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="movey">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="movexy">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="movez">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="move3d">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

이미지의 원래 위치는 검정 선의 박스였고, translate 함수를 이용하여 위치를 옮겨보았다.

대체로 적용된 모습을 잘 확인할 수 있지만 z 축 이동에 관련해서는 그 확인이 어려운 것이 보인다.

이유는 z 축이 앞, 뒤 이동이기 때문에 다른 요소가 겹치지 않으면 체감이 힘들기 때문이다.

4. scale 변형 함수 : 요소 확대 또는 축소

    <style>
        .origin {border: 1px solid; float: left; margin: 30px;}
        div img {
            width: 300px;
            height: 200px;
        }
        .scalex:hover {
            transform: scaleX(1.2);
        }
        .scaley:hover {
            transform: scaleY(1.5);
        }
        .scale:hover {
            transform: scale(0.7);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="scalex">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="scaley">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="scale">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

확대 또는 축소에 관련한 scale 함수는 1이 자신의 원래 크기이고,

1보다 큰 수를 넣으면 확대가 되고 1보다 작은 수를 넣으면 축소가 되는 것이다.

5. rotate 변형 함수 : 요소 회전하기

먼저 2차원에서의 회전을 적용시켜 보겠다.

    <style>
        .origin {
            border: 1px solid; 
            float: left;
            margin: 30px;}
        div img {
            width: 300px;
            height: 200px;
        }
        .rotate1:hover {
            transform: rotate(20deg);
        }
        .rotate2:hover {
            transform: rotate(-40deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotate1">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotate2">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

2차원에서의 기준이 되는 회전축은 z축으로 각도 지정을 양수로 하면 시계 방향으로 회전하고,

음수로 지정하면 반시계 방향으로 회전하게 된다.

또한 이미지의 크기에 따라 문서를 넘어가게 되면 위의 예시처럼 잘린 이미지로 보인다.

다음은 3차원에서의 회전을 해보자.

    <style>
        .origin {
            border: 1px solid; 
            float: left;
            margin: 30px;}
        div img {
            width: 300px;
            height: 200px;
        }
        .rotate1:hover {
            transform: rotate(20deg);
        }
        .rotate2:hover {
            transform: rotate(-40deg);
        }
        .rotatex:hover {
            transform: rotateX(40deg);
        }
        .rotatey:hover {
            transform: rotateY(45deg);
        }
        .rotatez:hover {
            transform: rotateZ(45deg);
        }
        .rotatexyz:hover {
            transform: rotate3d(2.5, 1.2, -1.5, 45deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotate1">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotate2">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotatex">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotatey">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotatez">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotatexyz">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

이미지를 확인해 보면 x 축과 y 축으로 회전을 시켰을 때 마치 축소가 된 것처럼 보이는 것을 알 수 있다.

하지만 이는 실제 축소가 된 것이 아니라 이미지의 중점을 지나는 곳을 각 축의 기준선이 된 것이기 때문에

다음과 같이 기준선을 바탕으로 회전한 것이다.

📌 2차원 회전과 3차원의 z축 회전은 동일하게 수행된다.

📌 perspective 적용하기

회전한 이미지의 입체감을 위하여 perspective 를 적용해 보자.

    <style>
        .origin {
            border: 1px solid; 
            float: left;
            margin: 30px;}
        div img {
            width: 300px;
            height: 200px;
        }
        .per {
            perspective: 300px;
        }
        .rotate1:hover {
            transform: rotate(20deg);
        }
        .rotate2:hover {
            transform: rotate(-40deg);
        }
        .rotatex:hover {
            transform: rotateX(40deg);
        }
        .rotatey:hover {
            transform: rotateY(45deg);
        }
        .rotatez:hover {
            transform: rotateZ(45deg);
        }
        .rotatexyz:hover {
            transform: rotate3d(2.5, 1.2, -1.5, 45deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="rotate1">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="rotate2">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin per">
        <div class="rotatex">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin per">
        <div class="rotatey">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin per">
        <div class="rotatez">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin per">
        <div class="rotatexyz">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

perspective 속성을 적용했을 때와 아닐 때를 비교해보면 좀 더 입체감 있는 표현이 되었음을 확인할 수 있다.

perspective 속성에 작성하는 값은 얼마나 더 앞으로 튀어나올 것인지에 대한 값으로

앞서 300px 라고 지정하였기 때문에 300px 만큼이 앞으로 튀어나온 것이다.

6. skew 변형 함수 : 요소를 비틀어 왜곡하기

skew 함수의 기준이 되는 축은 회전축과 같다.

    <style>
        .origin {
            border: 1px solid; 
            float: left;
            margin: 30px;}
        div img {
            width: 300px;
            height: 200px;
        }
        .skewx:hover {
            transform: skewX(30deg);
        }
        .skewy:hover {
            transform: skewY(15deg);
        }
        .skewxy:hover {
            transform: skew(-25deg, -15deg);
        }
    </style>
</head>
<body>
    <div class="origin">
        <div class="skewx">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="skewy">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
    <div class="origin">
        <div class="skewxy">
            <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDA0MjVfMjgz/MDAxNTg3ODI2MTM0NTI0.NNUcFte0hpFb57TXhRmJm9RvxiohdZJmPQaGho8R3Swg.D0k4U-sOfJ63blKo_V9B22eSJ9zWhW24uj8Av3LXHv8g.JPEG.dydrogud22/2.jpg?type=w2">
        </div>
    </div>
</body>

'CSS' 카테고리의 다른 글

애니메이션 (0)	2022.10.28
transition : 전환 (0)	2022.10.28
가상 클래스와 가상 요소 (0)	2022.10.26
속성 선택자 (0)	2022.10.26
combination selector : 연결 선택자 (0)	2022.10.26

MUKOM_PARK

transform : 변형

1. 2차원 변형 함수

2. 3차원 변형 함수

3. translate 변형 함수 : 요소 위치 이동시키기

4. scale 변형 함수 : 요소 확대 또는 축소

5. rotate 변형 함수 : 요소 회전하기

6. skew 변형 함수 : 요소를 비틀어 왜곡하기

'CSS' 카테고리의 다른 글

티스토리툴바

transform : 변형

1. 2차원 변형 함수

2. 3차원 변형 함수

3. translate 변형 함수 : 요소 위치 이동시키기

4. scale 변형 함수 : 요소 확대 또는 축소

5. rotate 변형 함수 : 요소 회전하기

6. skew 변형 함수 : 요소를 비틀어 왜곡하기

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바