CSS rotateZ() 函数

定义和用法

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

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

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

实例

例子 1

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

#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)

技术细节

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

相关页面

教程：CSS 3D 变换

参考：CSS transform 属性

参考：CSS rotate 属性

参考：CSS rotate() 函数

参考：CSS rotate3d() 函数

参考：CSS rotateX() 函数

参考：CSS rotateY() 函数