CSS | rotateZ() 函数

简介

rotateZ() 函数是 CSS3 2D 转换中的一个函数，用于对元素进行沿 Z 轴方向的旋转。它可以改变元素的外观，使其绕 Z 轴旋转一定的角度。在 2D 平面上，X 轴水平向右，Y 轴水平向下，Z 轴垂直向外，从页面向外延伸。

语法

rotateZ(angle)

• angle: 指定旋转的角度，可以使用度数（deg）或弧度（rad）。正值表示顺时针旋转，负值表示逆时针旋转。

示例

以下示例演示了如何使用 rotateZ() 函数来旋转一个矩形。

<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: blue;
    }
    .box:hover {
        transform: rotateZ(45deg);
    }
</style>

<div class="box"></div>

当鼠标悬停在矩形上时，矩形将以顺时针方向旋转45度。

兼容性

• 该函数在大多数现代浏览器中得到支持，包括 Chrome、Firefox、Safari、Edge 等。
• Internet Explorer 9 及更早的版本不支持该函数。

注意事项

• 旋转角度是相对于元素自身的旋转，而不是相对于整个网页。
• 可以通过组合 rotateZ() 函数与其他 CSS 转换函数，实现更复杂的动画效果。
• rotateZ() 只能对块级元素和内联块元素生效，行内元素不支持此函数。

参考链接

• MDN Web 文档：rotateZ()