CSS rotateZ() 函数

定义和用法

CSS rotateZ() 函数定义了一个元素绕z轴的3D旋转。

rotateZ() 函数在 transform 属性中使用。

提示：rotateZ(angle) 等同于 rotate(angle)。

실例

예제 1

사용 rotateZ() 多个 <div> 元素绕 z 轴旋转：

#myDiv1 {
  transform: rotateZ(40deg);
}
#myDiv2 {
  transform: rotateZ(60deg);
}
#myDiv3 {
  transform: rotateZ(-45deg);
}

직접 테스트해 보세요

예제 2

사용 rotateZ() z축을 기준으로 이미지를 회전시킵니다：

#img1 {
  transform: rotateZ(40deg);
}
#img2 {
  transform: rotateZ(60deg);
}
#img3 {
  transform: rotateZ(-45deg);
}

직접 테스트해 보세요

CSS 문법

rotateZ(angle)
값 설명
angle

필수. 회전 각도를 지정합니다. 가능한 단위：

  • deg（도）
  • rad（라디안）
  • turn（环路）

기술 세부 사항

버전： CSS Transforms Module Level 2

브라우저 지원

표中之 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
12 12 10 4 15

관련 페이지

教程：CSS 3D 변환

참조:CSS 트랜스폼 속성

참조:CSS rotate 속성

참조:CSS rotate() 함수

참조:CSS 라운드3d() 함수

참조:CSS 라운드X() 함수

참조:CSS 라운드Y() 함수