📌 transform

transform 관련 속성을 사용하면 요소 박스의 크기 변형 및 회전, 기울임 등을 지정할 수 있습니다. 또한 평면상의 2차원 변형뿐만 아니라 3차원 변형도 가능합니다.

MDN transform 속성

MDN CSS transform 사용하기

MDN transform 레퍼런스

3D 트랜스폼 예제

translate()

translate( ) 함수는 HTML 요소 박스를 평면상에서 수평 이동하는 기능입니다. translation-value 값에는 요소가 변형 기준점으로부터 가로 및 세로 방향으로 이동하는 길이 값을 지정할 수 있습니다.

div { transform: translate(50px, 50px); }
div { transform: translateX(50px); }
div { transform: translateY(50px); }

MDN translate() 함수

scale()

scale( ) 함수는 HTML 요소 박스의 크기를 변형하는 기능입니다. translate( ) 함수와 마찬가지로 X, Y 값을 지정하여 가로 및 세로 크기를 조절할 수 있습니다. 이때 지정 값은 단위를 가지지 않는 number 단위로, 이 값은 원래 요소 크기에 지정한 number 값을 곱한 크기로 적용됩니다.

div { transform: scale(0.5, 0.5); }
div { transform: scaleX(0.5); }
div { transform: scaleY(0.5); }

MDN scale() 함수