HTML/CSS - transform

안녕하세요, 오늘은 transform 변환 속성에 대해 정리하겠습니다. 

 

transform은 요소들에 이동, 크기 변환, 회전, 비틀기 등을 적용할 때 사용하는 함수입니다. transform은 애니메이션화 할 때 사용하면 유용합니다. 2D 변환과 3D 변환이 있습니다. 직접 코딩하면서 보는 것이 이해하기 쉬우므로 translate만 코드를 보고 나머지는 한 번씩 Codepen에서 실행해보시기 바랍니다!

 

◆ 2D 변환

이동 : position이라는 속성을 이용해도 동일한 효과를 주지만 position은 배치하고 변경을 안해줘야 하므로 애니메이션이나 변경되는 상황에서는 translate을 사용해줘야합니다!

-. translate(x, y) : 이동(X축, Y축)

-. translateX(x) : 이동(X축)

-. translateY(y) : 이동(Y축)

 

 

크기 : 비율에 맞게 확대/ 축소

-. scale(x, y) : 크기(X축, Y축)

-. scaleX(x) : 크기(X축)

-. scaleY(y) : 크기(Y축)

 

회전 : 요소를 회전(인수로 각도(deg)를 입력)

-. rotate(degree) : 회전(각도)

 

기울임 : 요소를 기울임(인수로 각도(deg)를 입력)

-. skew (x-deg, y-deg) : 기울임(X축, Y축)

-. skewX (x-deg) : 기울임(X축)

-. skewY (y-deg) : 기울임(Y축)