CSS3 rotate3d() 函数详解

1. 核心知识点讲解

1.1 rotate3d() 函数概述

rotate3d() 函数是 CSS3 transform 属性的一个函数，用于在 3D 空间中绕指定轴旋转元素。与 2D 旋转不同，3D 旋转可以绕任意轴进行，创造出更加丰富的立体效果。

1.2 语法格式

transform: rotate3d(x, y, z, angle);

1.3 参数说明

x, y, z: 这三个参数定义了旋转轴的方向向量，取值范围为 0 到 1 之间的数字。
- x=1, y=0, z=0: 绕 X 轴旋转
- x=0, y=1, z=0: 绕 Y 轴旋转
- x=0, y=0, z=1: 绕 Z 轴旋转
- 其他组合值: 绕自定义轴旋转
angle: 旋转角度，正值为顺时针旋转，负值为逆时针旋转。

1.4 工作原理

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

定义一个从原点到 (x, y, z) 的向量作为旋转轴
计算元素绕此轴旋转指定角度后的新位置
应用变换效果

2. 实用案例分析

2.1 绕 X 轴旋转

基本用法：

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

效果说明：

当鼠标悬停在容器上时，盒子会绕 X 轴旋转 180 度
配合 perspective 属性创建 3D 视觉效果
使用 transition 属性实现平滑的动画过渡

2.2 绕 Y 轴旋转

基本用法：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绕 Y 轴旋转示例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            perspective: 1000px;
            margin: 50px auto;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #45b7d1, #96ceb4);
            transition: transform 0.6s ease;
            transform-style: preserve-3d;
        }
        
        .container:hover .box {
            transform: rotate3d(0, 1, 0, 180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果说明：

当鼠标悬停在容器上时，盒子会绕 Y 轴旋转 180 度
这种效果常用于实现 3D 卡片翻转效果

2.3 绕 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;
            perspective: 1000px;
            margin: 50px auto;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff9ff3, #54a0ff);
            transition: transform 0.6s ease;
            transform-style: preserve-3d;
        }
        
        .container:hover .box {
            transform: rotate3d(0, 0, 1, 180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果说明：

当鼠标悬停在容器上时，盒子会绕 Z 轴旋转 180 度
绕 Z 轴旋转的效果与 2D 旋转 rotate() 函数类似

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>绕自定义轴旋转示例</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            perspective: 1000px;
            margin: 50px auto;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #feca57, #ff6b6b);
            transition: transform 1s ease;
            transform-style: preserve-3d;
        }
        
        .container:hover .box {
            transform: rotate3d(1, 1, 0, 180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

效果说明：

当鼠标悬停在容器上时，盒子会绕 (1, 1, 0) 轴旋转 180 度
这个轴是从原点到 (1, 1, 0) 的向量，位于 X-Y 平面的对角线上
创造出更加复杂和独特的 3D 旋转效果

2.5 3D 旋转的实际应用

3D 卡片翻转效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 卡片翻转效果</title>
    <style>
        .card-container {
            width: 300px;
            height: 400px;
            perspective: 1000px;
            margin: 50px auto;
        }
        
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transition: transform 0.8s ease;
            transform-style: preserve-3d;
        }
        
        .card-front, .card-back {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
        
        .card-front {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-back {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            transform: rotate3d(0, 1, 0, 180deg);
        }
        
        .card-container:hover .card {
            transform: rotate3d(0, 1, 0, 180deg);
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <div class="card-front">正面</div>
            <div class="card-back">背面</div>
        </div>
    </div>
</body>
</html>

效果说明：

这是一个完整的 3D 卡片翻转效果
卡片正面和背面使用不同的渐变背景
当鼠标悬停时，卡片绕 Y 轴旋转 180 度，显示背面
使用 backface-visibility: hidden 确保旋转时不会看到另一面

3. 代码示例总结

3.1 基本 3D 旋转

旋转轴	代码	效果
X 轴	`transform: rotate3d(1, 0, 0, 180deg);`	上下翻转
Y 轴	`transform: rotate3d(0, 1, 0, 180deg);`	左右翻转
Z 轴	`transform: rotate3d(0, 0, 1, 180deg);`	平面旋转
自定义轴	`transform: rotate3d(1, 1, 0, 180deg);`	对角线旋转

3.2 注意事项

perspective 属性：要实现真正的 3D 效果，需要在父容器上设置 perspective 属性
transform-style：对于嵌套的 3D 元素，需要设置 transform-style: preserve-3d
性能考虑：复杂的 3D 变换可能会影响性能，特别是在移动设备上
浏览器兼容性：虽然现代浏览器都支持 3D 变换，但在某些旧浏览器上可能需要使用前缀

4. 知识扩展

4.1 与其他变换函数的组合

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

/* 先平移再旋转 */
transform: translate3d(50px, 50px, 50px) rotate3d(1, 1, 0, 45deg);

/* 先旋转再缩放 */
transform: rotate3d(0, 1, 0, 90deg) scale3d(1.2, 1.2, 1.2);

4.2 动画中的应用

可以在 @keyframes 中使用 rotate3d() 函数创建复杂的 3D 动画：

@keyframes spin {
    0% {
        transform: rotate3d(1, 1, 1, 0deg);
    }
    100% {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}

.animated-element {
    animation: spin 3s linear infinite;
}

5. 总结

rotate3d() 函数是 CSS3 中实现 3D 旋转效果的强大工具，它允许元素绕任意轴进行旋转，创造出丰富的立体视觉效果。通过合理使用 perspective、transform-style 等属性，可以实现更加真实的 3D 场景。

核心要点：

rotate3d(x, y, z, angle) 函数定义了旋转轴和旋转角度
配合 perspective 属性创建 3D 视觉空间
与 transition 或 animation 结合实现平滑的 3D 动画
可用于创建卡片翻转、3D 菜单等交互效果

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