CSS-Transform 속성값 정리

브라우저에서의 X,Y,Z축

Transform

트랜스 폼은 여러 효과를 부여하기 위한 함수가 제공됩니다.

단, 애니메이션 효과는 제공하지 않으므로 애니메이션 속성이나 트랜지션 속성을 사용해 줘야 합니다.

Transform-origin 속성

이 속성은 요소의 기본 기준점을 설명할 때에 사용합니다.

최초의 기본기준점은 요소의 정중앙(50%,50%)입니다.

단, 이동은 기준점을 변경하여도 일정거리 만큼을 이동하기 때문에 의미는 없습니다.

설정값 단위로는 %,px,top,left,right,bottom이 있습니다.

(0,0)은 top,left와 같은 값이고 (100%,100%)는 bottom,right와 같은 값입니다.

 

아래는 트랜스폼에 부여되어 있는 함수에대해 정리한 표입니다.

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