rotateZ() 函数详解

rotateZ() 是 CSS 中的一个转换函数，它允许元素围绕 Z 轴进行旋转，同时保持元素的形状不变。这个函数返回一个 transform-function 数据类型，可以应用于各种 CSS 变换属性中。

在三维空间中，Z 轴垂直于屏幕平面，指向观察者。因此，使用 rotateZ() 函数会使元素在屏幕平面内旋转，就像使用 rotate() 函数一样，因为 rotate() 实际上是 rotateZ() 的简写形式。

语法

rotateZ() 函数的基本语法如下：

rotateZ(angle)

其中，angle 表示旋转角度，可以使用以下单位：

• 度数（deg）：例如 90deg 表示顺时针旋转 90 度
• 弧度（rad）：例如 1.57rad 约等于 90 度
• 梯度（grad）：例如 100grad 表示一个直角
• 圈数（turn）：例如 0.25turn 表示旋转四分之一圈

使用示例

以下是一个简单的示例，展示如何使用 rotateZ() 函数旋转一个元素：

.box {
  transform: rotateZ(45deg);
}

这段代码会将 .box 元素顺时针旋转 45 度。

与其他旋转函数的区别

CSS 提供了三个基本的旋转函数：

• rotateX()：围绕 X 轴旋转（垂直旋转）
• rotateY()：围绕 Y 轴旋转（水平旋转）
• rotateZ()：围绕 Z 轴旋转（平面内旋转）

rotateZ() 与 rotate() 函数的效果相同，因为 rotate() 默认就是围绕 Z 轴旋转。

实际应用

rotateZ() 函数在网页设计中有很多应用场景，例如：

• 创建旋转动画效果
• 设计加载指示器
• 实现交互式卡片翻转效果
• 创建游戏界面中的旋转元素

浏览器兼容性

rotateZ() 函数在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Safari 和 Edge。该功能自 2015 年 7 月起就在各大浏览器中可用，因此可以放心地在生产环境中使用。

需要注意的是，要使用 rotateZ() 和其他 3D 变换函数，通常需要设置 transform-style: preserve-3d; 和 perspective 属性，以确保 3D 效果正确显示。