[CSS] transform: 요소 변형( 회전 / 확대 / 축소 / 비틀기)

 

📌 transform

: 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있다.

 

 

rotate()

: 요소를 회전시킨다. 

 

rotate( angle )

rotateX( angle )

rotateY( angle )

• angle에는 각의 크기를 입력
• 단위는 deg, rad, grad, turn 등을 사용
• turn은 1회전, 즉 360deg를 의미

.box:hover {
	transform: rotateX( 180deg );
}

 

 

 

translate()

: 요소를 이동시킨다. 

 

translateX ( ): 오른쪽으로 이동

• 길이 단위를 음수로 지정하면 왼쪽으로 이동

translateY ( ): 아래쪽으로 이동

• 길이 단위를 음수로 지정하면 위쪽으로 이동

translate( 50px, 50% )

• 오른쪽, 아래쪽으로 이동

.box:hover {
	transform: translateX( 50px );
}

 

 

 

scale()

: 요소를 확대 or 축소한다.

• 1보다 큰 수는 확대, 1보다 작은 수는 축소

scaleX ( ): 가로로 확대

scaleY ( ): 세로로 확대 

scale(가로, 세로)

.box:hover {
	transform: scaleX( 1.5 );
}

 

 

 

skew()

: 요소를 비튼다.

skewX ( ): 가로로 비틀기

skewY ( ): 세로로 비틀기

skew(가로, 세로) 

.box:hover {
	transform: skewX( 30deg );
}

 

 

 

* transform 함수와 translate 속성을 따로 사용하는 이유

=> transform 속성이 2번 선언되면 마지막에 선언된 transform만 적용되기 때문

transform: translate(400px,75px) scale(2);

=

transform: translate(400px,75px)
translate: scale(2);

 

---

 

참고

 

transform - CSS: Cascading Style Sheets | MDN

 

translate() - CSS: Cascading Style Sheets | MDN

 

CSS3 Transform | PoiemaWeb

 

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성