[CSS] transform

transform

말 그대로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형시킬 때 사용한다.

1. transform / rotate

: 요소를 회전시킬 수 있습니다.

transform: rotate( angle ) /* angle이 양수나 음수냐에 따라 시계방향 반시계방향으로 회전한다 */
transform: rotateX( angle ) /* 가로축을 기준으로 회전한다. */
transform: rotateY( angle ) /* 세로축을 기준으로 회전한다. */

2. transform / translate

: 요소를 이동시킬 수 있습니다.

transform: translateX( 50px ) /* 오른쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 왼쪽으로 이동합니다. */
transform: translateY( 50px ) /* 아래쪽으로 50px 이동합니다. 길이 단위를 음수로 지정하면 위쪽으로 이동합니다. */
transform: translate( 50px, 50% ) /* 오른쪽으로 50px, 아래쪽으로 50% 이동합니다. */

3. transform / scale

: 요소를 확대 또는 축소할 수 있습니다. 1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.

transform: scale( 2.0 ); /* 가로와 세로 모두 2배 확대합니다. */
transform: scale( 2.0, 1.5 ); /* 가로로 2배, 세로로 1.5배 확대합니다.*/
transform: scaleX( 2.0 ); /* 가로로 2배 확대합니다. */
transform: scaleY( 1.5 ); /* 세로로 1.5배 확대합니다. */

4. transform / skew

: 요소를 비틀 수 있습니다.

transform: skewX( 30deg ); /* 가로 방향으로 30도 비틉니다. */
transform: skewY( 30deg ); /* 세로 방향으로 30도 비틉니다. */
transform: skewX( 30deg, 60deg ); /* 가로 방향으로 30도, 세로 방향으로 60도 비틉니다. */