CSS3 3D 변환

3D 변환

CSS3는 변환 소자를 포맷 3D를 사용할 수 있습니다.

이 장에서는 3D 변환 방법의 일부를 배울 수 있습니다 :

• rotateX ()
• rotateY ()

2D 및 3D 변환 변환 사이의 차이를 확인하기 위해 다음과 같은 요소를 클릭 :

브라우저 지원

표의 수치 속성의 버전 번호를 먼저 지원 브라우저를 나타낸다.

즉시 디지털 -webkit- 이어 -ms- 또는 접두어 지원 전 -moz- 우선 브라우저 버전 번호 때문이다.

rotateX () 메소드

누구의 X 축에서 회전도 주어진 수의 주변 요소 rotateX () 메소드.

예

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

»시도

rotateY () 메소드

누구의 Y 축에 회전도 주어진 수의 주변 요소 rotateY () 메소드.

예

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

»시도

변환 속성

다음 표는 모든 변환 속성을 보여줍니다 :

3 차원 변환 방법