[html/css] 트랜스폼( Transfrom)

트랜스폼

---

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

트랜스폼은 애니메이션 효과를 위해 사용하여야 하는 것은 아니지만 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용하기도 한다.

 

 

트랜스폼 표기법

표기법	설명	단위	사용에시
transform : translate(x,y);	요소의 위치를 X와 Y축만큼이동	px, %, em 등	translate(10px,50px)
transform : translateX(n);	요소의 위치를 X축으로 n만큼 이동	px, %, em 등	translateX(10px)
transform : translateY(n);	요소의 위치를 Y축으로 n만큼 이동	px, %, em 등	translateY(10px)
transform : scale(x,y);	요소의 크기를  x축으로 x배,Y축으로 y배 확대 혹은 축소	0과 양수	scale(.75)
transform : scaleX(n);	요소의 크기를 X축으로 n배 확대 또는 축소	0과 양수	scale(.75)
transform : scaleY(n);	요소의 크기를 Y축으로 n배 확대 또는 축소	0과 양수	scale(.75)
transform : skew(x,y);	요소를 X 축으로 x각도만큼,Y축으로 y각도만큼 기울임	+/-각도(deg)	skew(5deg,-20deg);
transform : skewX(x-angle)	요소를 X축으로 x각도만큼 기울임	+/-각도(deg)
transform : skewY(y-angle)	요소를 Y축으로 y각도만큼 기울임	+/-각도(deg)
rotate(angle)	요소를 angle만큼 회전시킨다.	+/-각도(deg)	rotate(45deg);

 

transform-origin

요소의 기본 기준점을 설정할때 사용된다. 기본기준점의 요소의 정중앙은 50% 50% 이다.