CSS 3D Transforms

3D Transforms

CSS는 3D 변환도 지원합니다.

아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오.

2D 회전

3D 회전

 

 

 

 

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);
}