[XML] CSS에서 transform 속성

transform 속성이란 ? ? ?

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

 

 

transform 키워드에는 4 종류가 있습니다.

1. rotate

2. translate

3. scale

4. skew

 

 

↓↓↓      기본에서 위치입니다      ↓↓↓

 

transform: rotate()는 요소를 지정한 각도만큼 회전시킵니다.

transform: rotate(30deg);

 

 

 transform: rotate(-30deg);

 

 

transform: rotatex(50deg);

 

 

transform: rotatey(50deg);

 

 

transform-origin은 지정 요소의 중심을 기준으로 동작합니다.

transform: rotate(20deg);
transform-origin: 100% 100%;

 

transform-origin: x%, y%;

 

 

transform: skew()는 지정 요소 x 또는 y축으로 기울일 수 있습니다.

transform: skewX(50deg);

X축으로 N도 만큼 기울이기 - x 축을 기준으로 수직

 

 

transform: skewY(50deg);

Y축으로 N도 만큼 기울이기 - Y 축을 기준으로 수평

 

 

transform:scale()는 해당 요소를 지정한 크기만큼 확대 또는 축소를 시킬 수 있습니다.

transform: scaleX(50%);

transform: scaleX(x축);

 

 

transform: scaleY(50%);

transform: scaleY(y축);

 

 

transform: scale(50%, 50%);

transform: scale(x축, y축)

 

 

transform:scale()는 해당 요소를 X축 또는 Y축으로 이동시킵니다.

transform: translateX(80px);

 

transform: translateY(80px);

 

 

transform: translate(-100px ,80px);

 

 

 

 

◡̈