CSS 변환으로 요소의 이동, 회전, 크기, 및 비틀어지게 할 수 있습니다.
변환에는 2D 변환과 3D변환이 있습니다
transform 속성과 transform-origin 속성을 사용하여 2D 변환을 할 수 있습니다.
여러 속성을 등록할때는 공백으로 구분하여 작성합니다.
| 메서드 | 설명 |
|---|---|
| translate(x,y) | 요소를 x축 y축으로 이동 변환 합니다. |
| translateX(x) | 요소를 x축 으로 이동 변환 합니다. |
| translateY(y) | 요소를 y축으로 이동 변환 합니다. |
| scale(x,y) | 요소의 폭과 높이를 변환 합니다. |
| scaleX(x) | 요소의 폭을 변환합니다. |
| scaleY(y) | 요소의 높이를 변환 합니다. |
| rotate(angle) | 요소를 회전합니다. |
| skew(x-angle, y-angle) | x축 y축에 따라 요소의 기울기를 변환합니다. |
| skewX(x-angle) | x축에 따라 요소의 기울기를 변환합니다. |
| skewY(y-angle) | y축에 따라 요소의 기울기를 변환합니다. |
| matrix(n,n,n,n,n,n) | 6개의 값의 행렬을 사용하여 2D 변환을 정의합니다. |
transform: translate(X,Y);
transform: translateX(X);
transform: translateY(Y);
X축 및 Y축으로 이동 변환 합니다.
px, em 등의 단위를 사용할수 있고, %는 현제 요소의 크기가 100% 입니다. (음수 가능)
transform: scale(X,Y);
transform: scaleX(X);
transform: scaleY(Y);
X축 및 Y축으로 크기를 변환합니다.
요소의 원래 크기가 기준이며 1입니다.
1보다 크면 확대 되고 1보다 작으면 축소 됩니다.
transform: rotate(angle);
주어진 정도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전합니다.
각도의 단위는 deg 이고 0 ~ 360 도입니다.(음수 가능 -90deg = 270deg)
transform: skew(x-angle, y-angle);
transform: skewX(x-angle);
transform: skewY(y-angle);
x축 y축에 따라 요소의 기울기를 변환합니다
각도의 단위는 deg 이고 -90deg ~ 90deg 입니다.
transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
6개의 매개변수를 사용하여 2D 변환 방법을 하나의 메서드로 지정합니다.