transform 속성과 perspective 속성을 사용하여 3D 변환을 할 수 있습니다.
| 메서드 | 설명 |
|---|---|
| translate3d(x, y, z) | 요소를 x축 y축 z축으로 이동 변환 합니다. |
| translateX(x) | 요소를 x축 으로 이동 변환 합니다. |
| translateY(y) | 요소를 y축으로 이동 변환 합니다. |
| translateZ(z) | 요소를 z축으로 이동 변환 합니다. |
| scale3d(x, y, z) | 3D 크기 변형을 정의합니다. |
| scaleX(x) | 요소의 x축 값을 지정하여 크기를 변형합니다. |
| scaleY(y) | 요소의 y축 값을 지정하여 크기를 변형합니다. |
| scaleZ(z) |
요소의 z축 값을 지정하여 크기를 변형합니다. CSS에는 두께라는 개념이 없습니다. |
| rotate3d(x, y, z, angle) | 요소를 회전합니다. |
| rotateX(angle) | x축을 중심으로 회전시킵니다. |
| rotateY(angle) | y축을 중심으로 회전시킵니다. |
| rotateZ(angle) | 2D Transform의 rotate() 메서드와 동일합니다. |
| perspective(n) |
요소를 바라보는 원근을 입니다. 화면을 바라보는 사용자와 얼마나 멀리에 위치 하는가를 나타냅니다. |
| matrix(...) | 4x4 16개의 값의 행렬을 사용하여 3D변환을 정의합니다. |
transform: translate3d(X,Y,Z);
transform: translateX(X); /*2D와 동일*/
transform: translateY(Y); /*2D와 동일*/
transform: translateZ(Z);
X축, Y축, Z축으로 이동 변환 합니다.
px, em 등의 단위를 사용할수 있고, %는 현제 요소의 크기가 100% 입니다. (음수 가능)
Z축 거리감을 나타냅니다 먼거리에 있는 대상이 가까이 보았을때 커보이는 느낌 정도로 이해하시면 됩니다.
scale3d(X,Y,Z);
transform: scaleX(X); /*2D와 동일*/
transform: scaleY(Y); /*2D와 동일*/
transform: scaleZ(Z);
X축, Y축, Z축으로 크기를 변환합니다.
요소의 원래 크기가 기준이며 1입니다. 소수점으로 축소 됩니다.
Z축은 transform: translateZ(Z); 로 이동했을때 확대/축소 되는 비율입니다.
rotate3d(X,Y,Z,angle);
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle); /*2D rotate() 와 동일*/
X축, Y축, Z축으로 회전 변환합니다.