transform

• transform은 요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다.
• transform은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 transition이나 animation과 함께 사용한다.

2D Transform

transform function	설명	단위
translate(x,y)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다	px, %, em 등
scale(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소시킨다	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다	0과 양수
skew(x-angle, y-angle)	요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다	+/- 각도(deg)
skewX(x-angle)	요소를 X축으로 x 각도만큼 기울인다	+/- 각도(deg)
skewY(y-angle)	요소를 Y축으로 y 각도만큼 기울인다	+/- 각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다	+/- 각도(deg)

3D Transform

transform function	설명	단위
translate(x,y,z)	요소의 위치를 X축으로 x만큼, Y축으로 y만큼, Z축으로 z만큼 이동시킨다	px, %, em 등
translateX(n)	요소의 위치를 X축으로 x만큼 이동시킨다	px, %, em 등
translateY(n)	요소의 위치를 Y축으로 y만큼 이동시킨다	px, %, em 등
translateZ(n)	요소의 위치를 Z축으로 z만큼 이동시킨다	px, %, em 등
scale3d(x,y)	요소의 크기를 X축으로 x배, Y축으로 y배, Z축으로 z배 확대 또는 축소 시킨다	0과 양수
scaleX(n)	요소의 크기를 X축으로 x배 확대 또는 축소 시킨다	0과 양수
scaleY(n)	요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다	0과 양수
scaleZ(n)	요소의 크기를 Z축으로 z배 확대 또는 축소 시킨다	0과 양수
rotate3d(x,y,z)	요소를 X축으로 x각도, Y축으로 y각도, Z축으로 z각도 회전시킨다	+/- 각도(deg)
rotateX(n)	요소를 X축으로 x각도 회전시킨다	+/- 각도(deg)
rotateY(n)	요소를 Y축으로 y각도 회전시킨다	+/- 각도(deg)
rotateZ(n)	요소를 Z축으로 z각도 회전시킨다	+/- 각도(deg)