VI. 트랜지션과 애니메이션

VI. 트랜지션과 애니메이션 - 1. 변형

Hush 2022. 6. 7. 22:26

transform 과 변형 함수

CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 한다.

transform: 함수

웹 요소를 이동시키는 변형 함수는 translate()인데, 예를 들어 웹 요소를 x축으로 50px, y축으로 100px 이동하는 클래스 선택자 .photo를 정의하려면 다음과 같이 사용한다.

.photo {transform: translate(50px, 100px); }

2차원 변형과 3차원 변형

2차원 변형은 웹 요소를 평면에서 변형한다.

예를 들어 수평방향으로 이동하거나 수직 방향으로 외곡한다.

이렇게 평면에서 변형할 때는 2차원 좌표를 사용하는데,

x축은 오른쪽으로 갈 수록 값이 커지고

y축은 아래로 내려갈수록 값이 커진다.

반면 3차원 변형은 2차원 축에 z축을 추가해서 변형한다.

3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아진다.

2차원 변형 함수

2차원에서 사용하는 변형 함수의 종류는 다음과 같다.

종류	설명
translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동한다. (예시는 50px, 100px)
translateX(tx)	지정한 크기만큼 x축으로 이동한다.
translateY(ty)	지정한 크기만큼 y축으로 이동한다.
scale(sx,sy)	지정한 비율만큼 x축과 y축으로 확대 축소한다. (예시는 1.5, 1.5 또는 150%, 150%) 확대 축소의 기준이 요소의 중심임을 참고.
scaleX(sx)	지정한 크기만큼 x축으로 확대 축소한다.
scaleY(sy)	지정한 크기만큼 y축으로 확대 축소한다.
rotate(각도)	지정한 각도만큼 회전한다. (예시는 20deg)
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡한다. (예시는 20deg, 5deg)
skewX(ax)	지정한 각도만큼 x축으로 왜곡한다
skewY(ay)	지정한 각도만큼 y축으로 왜곡한다.

3차원 변형 함수는 다음과 같다.

종류	설명
translate3d(tx, ty, tz)	지정한 크기만큼 이동합니다.
translateZ(tz)	지정한 크기만큼 z축으로 이동합니다.
scale3d(sx, sy, sz)	지정한 비율만큼 확대 축소합니다.
scaleZ(sz)	지정한 비율만큼 z축으로 확대 축소합니다.
rotate(rx, ry, 각도)	지정한 각도만큼 회전합니다.
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전합니다.
rotateX(각도)	지정한 각도만큼 x축으로 회전합니다.
rotateY(각도)	지정한 각도만큼 y축으로 회전합니다.
rotateZ(각도)	지정한 각도만큼 z축으로 회전합니다.
perspective(길이)	입체적으로 보일 수 있도록 깊잇값을 지정합니다.

웹 요소를 이동시키는 translate() 함수

translate() 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다.

translate() 함수에서 사용하는 형식은 다음과 같다.

함수	변형내용
transform: translate(tx, ty)	x 축으로 tx만큼, y축으로 ty만큼 이동합니다. tx와 ty 두가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주합니다.
transform: translate3d(tx, ty, tz)	x축으로 tx만큼, y축으로 ty만큼, 그리고 z축(앞뒤)으로 tz만큼 이동합니다.
transform: translateX(tx)	x축으로 tx만큼 이동합니다.
transform: translateY(ty)	y축으로 ty만큼 이동합니다.
transform: translateZ(tz)	z축으로 tz만큼 이동합니다.

다음은 translate() 함수를 이용해 사용자가 도형 위로 마우스 포인터를 올려놓으면 이동하는 예제입니다,

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 100px;
            }
            #movex:hover {transform: translateX(80px);}
            #movey:hover {transform: translateY(80px);}
            #movez:hover {transform: translateZ(80px);}

            
        </style>
    </head>
    <body>
        <div class="box" id="movex"></div>
        <div class="box" id="movey"></div>
        <div class="box" id="movez"></div>
    </body>
</html>

요소를 확대 축소하는 scale() 함수

scale() 함수는 웹 요소를 지정한 크기만큼 확대하거나 축소한다.

scale() 함수를 사용하는 형식은 다음과 같다.

괄호 안의 값이 1 또는 100%보다 크면 확대되고 그렇지 않으면 축소된다.

종류	변형결과
transform: scals(sx, sy)	x축으로 sx배, y축으로 sy배 확대합니다.값이 하나뿐이라면 x, y 에 같은 값을 적용합니다.
transform: scale3d(sx, sy, sz)	각 축으로 각 값만큼 확대합니다.
transform: scaleX(sx)	...
transform: scaleY(sy)	...
transform: scaleZ(sz)	...

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 100px;
            }
            #scalex:hover {transform: scaleX(2);}
            #scaley:hover {transform: scaleY(2);}
            #scalez:hover {transform: scaleZ(2);}

            
        </style>
    </head>
    <body>
        <div class="box" id="scalex"></div>
        <div class="box" id="scaley"></div>
        <div class="box" id="scalez"></div>
    </body>
</html>

요소를 회전시키는 rotate() 함수

2차원 rotate()함수

요소를 회전시키는 rotate() 함수는 2차원 회전과 3차원 회전에서 모두 사용할 수 있다.

rotate() 함수를 2차원에서 사용할 때는 각도만 지정하면 된다.

함수는 웹 요소를 지정한 각도만큼 회전시킨다.

transform: rotate(각도)

rotate() 함수에서 지정할 수 있는 각도의 값은 degree나 radian을 사용한다.

값이 양수이면 시계방향으로, 음수이면 반시계방향으로 회전한다.

예시는 다음과 같다

#rotate1:hover {transform: rotate(20deg);}
#rotate2:hover {transform: rotate(1rad);}

3차원 rotate() 함수

3차원 rotate() 함수는 다음과 같이 x축, y축, z축을 기준으로 회전시킨다.

transform: rotate(rx, ry, 각도)
transform: rotate3d(rx, ry, rz, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)

이때 perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있다.

perspective 속성은 3차원 변형에서 사용하는데, 관측점의 높이를 설정하여 원근감을 표현한다.

주의할 점은 perspective 속성은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.

rx, ry, rz는 회전의 축이되는 벡터이다.

요소를 비틀어 왜곡하는 skew() 함수

skew() 함수는 지정한 각도만큼 요소를 비틀어 왜곡한다.

이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.

transform: skew(x각도, y각도)
transform: skewX(x각도)
transform: skewY(y각도)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            .boxborder{
                width: 200px;
                height: 200px;
                border: solid;
                padding: 0px;
                margin: 60px
            }
            .box {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            #skewx {transform: skewX(30deg);}
            #skewy {transform: skewY(30deg);}
            #skewxy {transform: skew(30deg, 30deg);}
        </style>
    </head>
    <body>
        <div class="boxborder"><div class="box" id="skewx"></div></div>
        <div class="boxborder"><div class="box" id="skewy"></div></div>
        <div class="boxborder"><div class="box" id="skewxy"></div></div>
    </body>
</html>

저작자표시 (새창열림)