transform

transform 속성은 요소에 이동, 회전, 확대축소, 비틀기 효과를 부여할 수 있는 속성이다.
자주쓰이는 transform 속성의 종류는 다음과 같다.

• transform: translate()
• transform: scale()
• transform: rotate()
• transform:skew()

transform: translate()

해당 속성은 지정한 요소를 X 또는 Y축으로 이동시키는 속성이다.

transform 적용 전

left: 50%

transform 적용 후

left: 50%
transform: translateX(-50%); /* x축으로 요소 크기의 -50% 만큼 이동 */

여러 속성 적용 가능

아래와 같이 동시에 여러개의 속성을 줄 수도 있다.

transform: rotate(45deg) translateX(-50%)

만약 아래와 같이 2개의 속성을 적으면, 뒤에 오는 속성이 적용된다.

transform: rotate(45deg) /* 적용 X */
transform: translateX(-50%) /* 적용 O */

transform: scale()

해당 속성은 지정한 요소를 X 또는 Y축으로 확대시키는 속성이다.

transform: rotate()

해당 속성은 지정한 요소를 회전 시키는 속성이다.

transform:skew()

해당 속성은 지정한 요소를 기울이는 속성이다.