웹퍼블리셔 강의 4주차 : transform 속성

CSS transform

이 속성은 말 그대로 '변형'시켜요.
위치를 변형하거나, 기울기를 변형하거나, 크기를 변형하거나 등등...

transform:translate

말 그대로 이동입니다

문법
transform: translateX( 이동값 ) -X좌표로 이동값만큼 이동
transform: translateY( 이동값 ) -X좌표로 이동값만큼 이동
transform: translate( X이동값, Y이동값 )

transform:rotate

말 그대로 회전입니다

문법
transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( angle )

angle에는 각의 크기를 입력하면 돼요
단위는 보통 deg, rad, graf, turn 등을 사용한다구 하네요.

transform:scale

말 그대로 크기조절입니다

문법
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배 확대

1보다 큰 수는 확대, 1보다 작은 수는 축소입니다.

transform:skew

말 그대로 비스듬히입니다

문법
transform: skewX( 30deg ); - 가로로 30도 기웁니다
transform: skewY( 30deg ); - 세로로 30도 기웁니다
transform: skewX( 30deg, 60deg ); - 가로로 30도, 세로로 60도 기웁니다