[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 1

 

 

 

이번 아티클부터는 CSS에서 애니메이션을 다루는 방법에 대해서 살펴봅니다. 첫 번째로는 우선 CSS에서 사용하게 되는 transform 속성의 개념과 사용 방법에 대해서 살펴보겠습니다. 말 그대로 물체의 크기, 형태의 위치 등을 바꾸는 것을 트랜스폼(transform)으로 지정하게 됩니다. 

 

transform 속성도 다른 여타 CSS에서의 속성들과 비슷한 형태로 지정하게 됩니다. transform: 함수() 형태로 선언하게 되지요. 예를 들어서 어떤 클래스 선택자에 요소를 x축 100px, y축 50px 이동하는 속성을 부여한다고 하면 아래와 같이 작성하게 됩니다. 

 

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

 

 

---

 

 

○ 2차원 트랜스폼(transform)

 

웹에서도 여타 다른 엔진에서와 마찬가지로 2차원과 3차원의 개념을 다루게 됩니다. 우선, 2차원 트랜스폼(변형) 요소는 평명에서의 변형을 의미하게 됩니다. 수평 / 수직으로의 방향으로 변경을 진행하게 되는 것입니다. 

 

참고로 이 경우 2차원 좌표에서는 x축은 오른쪽으로 갈 수록 값이 증가하며, y축은 아래로 내려갈수록 값이 커집니다. 

 

 

2차원 트랜스폼 함수의 종류는 아래와 같습니다. 

 

종류	설명
translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동한다.
translateX(tx)	지정한 크기만큼 x축으로 이동한다.
translateY(ty)	지정한 크기만큼 y축으로 이동한다.
scale(sx, sy)	지정한 크기만큼 x축, y축으로 확대 또는 축소한다.
scaleX(sx)	지정한 크기만큼 x축으로 확대 또는 축소한다.
scaleY(sy)	지정한 크기만큼 y축으로 확대 또는 축소한다.
rotate(각도)	지정한 각도만큼 회전한다.
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡한다.
skewX(ax)	지정한 각도만큼 x축으로 왜곡한다.
skewY(ay)	지정한 각도만큼 y축으로 왜곡한다.

 

 

 

 

 

○ 3차원 트랜스폼(transform)

 

3차원 트랜스폼의 경우, 기존 2차원 트랜스폼에서 x축과 y축에 원근감을 주는 z축을 추가하여 적용하게 됩니다. 즉, z축은 화면을 보는 사용자 기준으로 '앞 뒤로 움직이며' 보는 사람쪽으로 다가오게 되면 값이 커지고, 뒤로 멀어지면 값이 작아집니다.

 

 

3차원 트랜스폼 함수의 종류는 아래와 같습니다. 

 

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