CSS 3D 변환
CSS 3D 변환
CSS는 3D 변환을 지원합니다。
아래 요소에 마우스를 올려다 대면 2D와 3D 변환의 차이를 확인할 수 있습니다：
2D rotate
2D 회전
3D 회전
transform
이 장에서는 다음과 같은 CSS 속성을 배웁니다:
브라우저 지원
| 속성 | 표에서의 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다. | IE | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|---|
| transform | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
CSS 3D 변환 메서드
CSS를 통해 transform 속성, 다음과 같은 3D 변환 메서드를 사용할 수 있습니다:
rotateX()rotateY()rotateZ()
rotateX() 메서드
rotateX() 요소가 X축을 기준으로 주어진 각도로 회전하는 방법을 정의합니다:
예제
#myDiv {
transform: rotateX(150deg);
}
rotateY() 메서드
rotateY() 요소가 Y축을 기준으로 주어진 각도로 회전하는 방법을 정의합니다:
예제
#myDiv {
transform: rotateY(130deg);
}
rotateZ() 메서드
rotateZ() 요소가 Z축을 기준으로 주어진 각도로 회전하는 방법을 정의합니다:
예제
#myDiv {
transform: rotateZ(90deg);
}
CSS 변환 속성
다음 표는 모든 3D 변환 속성을 나열합니다:
| 속성 | 설명 |
|---|---|
| transform | 2D나 3D 변환을 요소에 적용합니다. |
| transform-origin | 변환된 요소의 위치를 변경할 수 있게 합니다. |
| transform-style | 내포된 요소가 3D 공간에서 어떻게 표시되는지 정의합니다. |
| perspective | 3D 요소의 시각 효과를 정의합니다. |
| perspective-origin | 3D 요소의 하단 위치를 정의합니다. |
| backface-visibility | 요소가 화면에 직면하지 않을 때 보이는지 여부를 정의합니다. |
CSS 3D 변환 메서드
| 함수 | 설명 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
3D 변환을 정의하며, 16개의 값을 가진 4x4 행렬을 사용합니다. |
| translate3d(x,y,z) | 3D 변환을 정의합니다. |
| translateX(x) | 3D 변환을 정의하며, X축 값만 사용합니다. |
| translateY(y) | 3D 변환을 정의하며, Y축 값만 사용합니다. |
| translateZ(z) | 3D 변환을 정의하며, Z축 값만 사용합니다. |
| scale3d(x,y,z) | 3D 축소 변환을 정의합니다. |
| scaleX(x) | 3D 축소 변환을 정의하며, X축 값을 주어서 정의합니다. |
| scaleY(y) | 3D 축소 변환을 정의하며, Y축 값을 주어서 정의합니다. |
| scaleZ(z) | 3D 축소 변환을 정의하며, Z축 값을 주어서 정의합니다. |
| rotate3d(x,y,z,angle) | 3D 회전을 정의합니다. |
| rotateX(angle) | X축을 따라 3D 회전을 정의합니다. |
| rotateY(angle) | Y축을 따라 3D 회전을 정의합니다. |
| rotateZ(angle) | Z축을 따라 3D 회전을 정의합니다. |
| perspective(n) | 3D 변환 요소의 시각적 시점을 정의합니다. |
