CSS 3D 변환

3D 변환

이 장에서는 다음 CSS 속성에 대해 학습합니다.

• transform

지원 브라우저

표의 숫자는 속성을 완전히 지원하는 최소 브라우저 버전을 지정합니다.

3D 변환 메서드

transform 속성을 사용하여 다음과 같은 3D 변환 방법을 사용할 수 있습니다.

• rotateX()
• rotateY()
• rotateZ()

rotateX()

rotateX() 메서드는 X축을 중심으로 요소를 주어진 각도로 회전시킵니다.

예제 1

#myDiv {
  transform: rotateX(150deg);
}

rotateY()

rotateY() 메서드는 Y축을 중심으로 요소를 주어진 각도로 회전시킵니다.

예제 2

#myDiv {
  transform: rotateY(150deg);
}

rotateZ()

rotateZ() 메서드는 요소를 Z축을 중심으로 주어진 각도로 회전시킵니다.

예제 3

#myDiv {
  transform: rotateZ(90deg);
}