CSS3에서 제공하는 3D 변환(3D Transform)은 요소를 입체적으로 조작할 수 있게 해주는 강력한 기능입니다. 요소를 X축, Y축, Z축 방향으로 이동하거나 회전하고, 크기까지 조절할 수 있어 입체적인 카드 뒤집기 효과, 회전 갤러리 등 다양한 웹 UI를 구현하는 데 활용됩니다.
다음은 CSS3에서 호출할 수 있는 주요 3D 변환 메서드를 정리한 표입니다.
CSS3 3D 변환 함수 목록
| 함수 | 설명 |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 16개의 값으로 구성된 행렬을 사용하여 요소를 변환합니다. |
| translate3d(x,y,z) | X축, Y축, Z축 세 개의 값을 사용하여 요소를 이동시킵니다. |
| translateX(x) | X축 방향으로 요소를 이동시킵니다. |
| translateY(y) | Y축 방향으로 요소를 이동시킵니다. |
| translateZ(z) | Z축 방향으로 요소를 이동시킵니다. |
| scaleX(x) | X축 방향으로 요소의 크기를 조절합니다. |
| scaleY(y) | Y축 방향으로 요소의 크기를 조절합니다. |
| scaleZ(z) | Z축 방향으로 요소의 크기를 조절합니다. |
| rotateX(angle) | X축을 기준으로 요소를 회전시킵니다. |
| rotateY(angle) | Y축을 기준으로 요소를 회전시킵니다. |
| rotateZ(angle) | Z축을 기준으로 요소를 회전시킵니다. |
3D 변환 사용 시 알아두면 좋은 점
3D 변환이 화면에서 진짜 입체적으로 보이려면 부모 요소에 perspective(원근감) 속성을 설정해야 합니다. 원근감이 없으면 Z축 방향의 이동이나 회전 효과가 거의 눈에 띄지 않습니다.
또한 transform-style: preserve-3d;를 지정하면 자식 요소들도 3D 공간을 그대로 유지하기 때문에, 여러 겹의 요소를 쌓아 올린 복잡한 입체 효과도 손쉽게 만들 수 있습니다.