rotateZ() - Z 轴旋转

什么是 rotateZ()？

rotateZ() 函数绕 Z 轴（垂直于屏幕）旋转元素。效果与 rotate() 完全相同，都是平面旋转。

语法说明

transform: rotateZ(angle);

• angle - 旋转角度
• deg（度）：最常用，360deg = 一圈
• rad（弧度）：2π rad = 一圈
• turn（圈数）：1turn = 一圈
• 正值：顺时针旋转
• 负值：逆时针旋转

示例 1：基础旋转

悬停方块查看旋转效果

/* 基础旋转 */
.box {
    transform: rotateZ(45deg);
}

/* 悬停旋转 */
.box:hover {
    transform: rotateZ(45deg);
}

示例 2：rotateZ() vs rotate()

两者效果完全相同

/* 这两种写法效果完全相同 */
.box1 { transform: rotate(45deg); }
.box2 { transform: rotateZ(45deg); }

/* rotate() 是 rotateZ() 的简写 */

示例 3：持续旋转动画

使用 @keyframes 创建旋转动画

@keyframes spinZ {
    from { transform: rotateZ(0deg); }
    to   { transform: rotateZ(360deg); }
}

.spinning {
    animation: spinZ 2s linear infinite;
}

重要说明

实际应用

/* 加载动画 */
.spinner {
    animation: spinZ 1s linear infinite;
}

/* 3D 组合变换 - 保持命名一致性 */
.cube {
    transform: rotateX(30deg) rotateY(45deg) rotateZ(15deg);
}

/* 卡片翻转 */
.card:hover {
    transform: rotateZ(5deg) scale(1.05);
}