CSS3 rotateZ() 函数详解

1. 核心知识点讲解

1.1 rotateZ() 函数概述

rotateZ() 函数是 CSS3 transform 属性的一个函数，用于绕 Z 轴旋转元素。它是 rotate3d(0, 0, 1, angle) 的简写形式，效果与 2D 旋转 rotate() 函数类似，都是在平面内旋转元素。

1.2 语法格式

transform: rotateZ(angle);

1.3 参数说明

angle: 旋转角度，正值为顺时针旋转，负值为逆时针旋转。

角度单位：

deg: 度（默认单位），例如 45deg
rad: 弧度，例如 Math.PI/4rad
turn: 圈数，例如 0.25turn（等于 90 度）
grad: 梯度，例如 50grad（等于 45 度）

1.4 工作原理

rotateZ() 函数通过以下步骤工作：

接收一个角度参数，表示绕 Z 轴旋转的角度
计算元素绕 Z 轴旋转指定角度后的新位置
应用旋转变换，保持元素的中心点不变（除非设置了 transform-origin）

1.5 与 rotate() 和 rotate3d() 的关系

rotateZ(angle) 是 rotate3d(0, 0, 1, angle) 的简写形式
rotateZ(angle) 与 rotate(angle) 效果相同，都是在平面内旋转元素
从技术上讲，rotate() 是 2D 变换，而 rotateZ() 是 3D 变换的一部分

2. 实用案例分析

2.1 基本 Z 轴旋转

基本用法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本 Z 轴旋转示例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            transition: transform 0.6s ease;
        }
        
        .container:hover .box {
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果说明：

当鼠标悬停在容器上时，盒子会绕 Z 轴旋转 45 度，产生平面旋转的效果
使用 transition 属性实现平滑的动画过渡
与 rotate() 函数效果相同

2.2 不同角度的 Z 轴旋转

角度变化示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同角度的 Z 轴旋转示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            margin: 50px auto;
            width: 80%;
        }
        
        .box {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #45b7d1, #96ceb4);
            transition: transform 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .box-45:hover {
            transform: rotateZ(45deg);
        }
        
        .box-90:hover {
            transform: rotateZ(90deg);
        }
        
        .box-135:hover {
            transform: rotateZ(135deg);
        }
        
        .box-180:hover {
            transform: rotateZ(180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box-45">45°</div>
        <div class="box box-90">90°</div>
        <div class="box box-135">135°</div>
        <div class="box box-180">180°</div>
    </div>
</body>
</html>

效果说明：

展示了不同角度的 Z 轴旋转效果
45 度旋转会使元素向右倾斜
90 度旋转会使元素垂直站立
135 度旋转会使元素向左倾斜
180 度旋转会使元素完全翻转

2.3 负值角度的应用

逆时针旋转示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>负值角度的 Z 轴旋转示例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #feca57, #ff6b6b);
            transition: transform 0.6s ease;
        }
        
        .container:hover .box {
            transform: rotateZ(-45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果说明：

当鼠标悬停在容器上时，盒子会绕 Z 轴逆时针旋转 45 度
与顺时针旋转相比，效果是旋转方向相反

2.4 不同角度单位的应用

角度单位示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不同角度单位的 Z 轴旋转示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            margin: 50px auto;
            width: 80%;
        }
        
        .box {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            transition: transform 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .box-deg:hover {
            transform: rotateZ(45deg); /* 45度 */
        }
        
        .box-turn:hover {
            transform: rotateZ(0.25turn); /* 0.25圈 = 90度 */
        }
        
        .box-rad:hover {
            transform: rotateZ(1.5708rad); /* π/2弧度 ≈ 90度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box-deg">45deg</div>
        <div class="box box-turn">0.25turn</div>
        <div class="box box-rad">π/2rad</div>
    </div>
</body>
</html>

效果说明：

展示了不同角度单位的使用方法
三种单位都可以达到相同的旋转效果，只是表示方式不同
deg 是最常用的角度单位，直观易懂
turn 适合表示整圈或半圈的旋转
rad 适合需要与数学计算结合的场景

2.5 Z 轴旋转的实际应用

旋转按钮效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转按钮效果</title>
    <style>
        .button-container {
            margin: 50px auto;
            width: 200px;
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .btn:hover {
            transform: rotateZ(5deg) scale(1.05);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: rotateZ(0deg) scale(0.95);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="button-container">
        <a href="#" class="btn">点击我</a>
    </div>
</body>
</html>

效果说明：

这是一个使用 rotateZ() 实现的旋转按钮效果
当鼠标悬停时，按钮会轻微旋转并放大，产生动感效果
当点击时，按钮会恢复原状并缩小，产生按压效果
配合 box-shadow 属性增强立体感

2.6 旋转加载动画

动画应用示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转加载动画</title>
    <style>
        .loader {
            width: 50px;
            height: 50px;
            margin: 100px auto;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="loader"></div>
</body>
</html>

效果说明：

这是一个使用 rotateZ() 实现的旋转加载动画
通过 @keyframes 创建无限旋转的动画效果
使用 border 和 border-radius 创建圆形加载指示器
动画流畅，适合作为页面加载时的指示器

3. 代码示例总结

3.1 基本 Z 轴旋转

旋转角度	代码	效果
45 度	`transform: rotateZ(45deg);`	顺时针旋转 45 度
90 度	`transform: rotateZ(90deg);`	顺时针旋转 90 度
180 度	`transform: rotateZ(180deg);`	顺时针旋转 180 度
360 度	`transform: rotateZ(360deg);`	顺时针旋转 360 度（回到原位）
-45 度	`transform: rotateZ(-45deg);`	逆时针旋转 45 度
-90 度	`transform: rotateZ(-90deg);`	逆时针旋转 90 度
-180 度	`transform: rotateZ(-180deg);`	逆时针旋转 180 度

3.2 注意事项

与 rotate() 的区别：rotateZ() 与 rotate() 效果相同，但 rotateZ() 是 3D 变换的一部分
性能考虑：平面旋转操作性能开销较小，适合频繁使用
浏览器兼容性：现代浏览器都支持 rotateZ()，但在某些旧浏览器上可能需要使用前缀
旋转原点：默认情况下，旋转以元素的中心点为原点。可以使用 transform-origin 属性改变旋转原点
与其他变换的组合：可以与 scale()、translate() 等其他变换函数组合使用

4. 知识扩展

4.1 与其他变换函数的组合

rotateZ() 函数可以与其他变换函数组合使用，创造出更加复杂的效果：

/* 先平移再旋转 */
transform: translate(50px, 50px) rotateZ(45deg);

/* 先旋转再缩放 */
transform: rotateZ(45deg) scale(1.2);

/* 组合多个变换 */
transform: translate(20px, 20px) rotateZ(30deg) scale(1.1);

4.2 动画中的应用

可以在 @keyframes 中使用 rotateZ() 函数创建旋转动画：

@keyframes wobble {
    0%, 100% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-5deg);
    }
    75% {
        transform: rotateZ(5deg);
    }
}

.wobbling-element {
    animation: wobble 2s ease-in-out infinite;
}

4.3 与 transform-origin 的配合

通过设置 transform-origin 属性，可以改变旋转的中心点：

/* 以左上角为旋转原点 */
.box-top-left {
    transform-origin: top left;
    transform: rotateZ(45deg);
}

/* 以右下角为旋转原点 */
.box-bottom-right {
    transform-origin: bottom right;
    transform: rotateZ(45deg);
}

/* 以自定义点为旋转原点 */
.box-custom {
    transform-origin: 20px 30px;
    transform: rotateZ(45deg);
}

5. 总结

rotateZ() 函数是 CSS3 中实现绕 Z 轴旋转效果的工具，它与 rotate() 函数效果相同，都是在平面内旋转元素。虽然它是 3D 变换的一部分，但实际上产生的是 2D 旋转效果。

核心要点：

rotateZ(angle) 函数定义了绕 Z 轴旋转的角度
正值为顺时针旋转，负值为逆时针旋转
与 rotate() 函数效果相同，但属于 3D 变换模块
与 transition 或 animation 结合实现平滑的旋转动画
可用于创建按钮效果、加载动画等交互元素

通过本教程的学习，你应该能够熟练使用 rotateZ() 函数创建各种平面旋转效果，为你的网页增添更多动感和视觉吸引力。