[PoiemaWeb] 트랜스폼

• 트랜스폼(Transform)은 요소에 이동(translate), 화전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수를 제공한다. 단 애니메이션 효과를 제공하지 않기 때문에 정의된 프로퍼티가 바로 적용되어 화면에 표시된다.
• 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용한다.

1. 2D 트랜스폼 (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)

 

  1.1 transform

    transform : func1 func2 func3 ....;

  1.2 transform-origin

• 요소의 기본기준점을 설정할 때 사용된다. 기본기분점은 요소의 정중앙이다(50%, 50%). 이동은 기준점을 변경하여도 일정 거리만큼 이동하므로 의미가 없다. 설정 값으로 %, px, top left, bottom right을 사용할 수 있다.

 

2. 3D 트랜스폼 (3D Transform)

transform function	설명	단위
translate3d(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(x)	요소를 X축으로 x각도 회전시킨다.	+/- 각도(deg)
rotateY(y)	요소를 Y축으로 y각도 회전시킨다.	+/- 각도(deg)
rotateZ(z)	요소를 Z축으로 z각도 회전시킨다.	+/- 각도(deg)