[CSS] transform:rotate, skew, translate

🔗참고할만한 사이트: 코드펜

 

1.rotate

transform: rotate(45deg);

45도만큼 시계방향으로 회전됨.

 

 

 

 

 

2.skew

엘리먼트를 비틀 때 사용

 

transform: skewX(45deg);

x축으로 45도로 비틀어짐.

 

transform: skewY(45deg);

 

y축으로 45도로 비틀어짐.

 

 

 

 

 

3.translate

이동시킬 때

transform: translateX(45px);

하늘색박스가 원래 있던 위치

x축으로 45px만큼 이동

 

 

transform: translateY(45px);

y축으로 45px만큼 이동

 

 

 

transform: translate(45px,45px);

x,y축이 각각 45px만큼 이동