CSS 3D 变换

学习目标

理解 CSS 3D 变换的基本原理，区分 X、Y、Z 三个旋转轴的作用
掌握 rotateX()、rotateY() 和 rotateZ() 函数的语法与应用场景
学会使用 perspective 属性增强 3D 效果的深度感
了解如何结合 transition 实现流畅的 3D 动画交互

正文内容

什么是 3D 变换

CSS 3D 变换允许我们在三维空间中操作 HTML 元素。与传统的 2D 变换（仅涉及水平和垂直移动）不同，3D 变换引入了 ** 深度（Z 轴）** 的概念，使元素能够围绕 X 轴、Y 轴和 Z 轴进行旋转，从而创造出逼真的立体效果。

核心旋转函数包括：

rotateX()：围绕水平轴（X 轴）旋转，产生“点头”或“仰头”的效果。
rotateY()：围绕垂直轴（Y 轴）旋转，产生“摇头”或“侧身”的效果。
rotateZ()：围绕深度轴（Z 轴，垂直于屏幕）旋转，等同于 2D 平面旋转。

综合示例：多轴联动

我们可以同时应用多个旋转函数来创建复杂的 3D 姿态。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50; /* 绿色 */
            /* 同时绕三个轴旋转 30 度 */
            transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
            
            /* 为了看到更好的 3D 效果，通常建议给父容器添加 perspective，此处仅为演示语法 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果解析：

rotateX(30deg)：元素顶部向后倾斜，底部向前。
rotateY(30deg)：元素左侧向前，右侧向后。
rotateZ(30deg)：元素在屏幕平面上顺时针旋转。
三者结合，使方块呈现出一种悬浮且扭曲的立体姿态。

三大旋转轴

1. 围绕 X 轴旋转

rotateX() 方法用于围绕元素的水平轴（X 轴）进行旋转。想象一根穿过元素中心的水平线，元素将围绕这根线上下翻转。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box-x {
            width: 100px;
            height: 100px;
            background-color: #FF9800; /* 橙色 */
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box-x"></div>
</body>
</html>

视觉效果：

正值（如 45deg）：元素顶部向屏幕深处移动，底部向用户方向移动，产生“俯视”感。
负值（如 -45deg）：元素顶部向用户方向移动，底部向屏幕深处移动，产生“仰视”感。
这种变换常用于制作翻牌效果的上半部分动作。

2. 围绕 Y 轴旋转

rotateY() 方法用于围绕元素的垂直轴（Y 轴）进行旋转。想象一根穿过元素中心的垂直线，元素将围绕这根线左右翻转，类似开门或照镜子。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box-y {
            width: 100px;
            height: 100px;
            background-color: #4CAF50; /* 绿色 */
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="box-y"></div>
</body>
</html>

视觉效果：

正值（如 45deg）：元素左侧向用户方向移动，右侧向屏幕深处移动。
负值（如 -45deg）：元素右侧向用户方向移动，左侧向屏幕深处移动。
这种变换常用于制作卡片翻转、菜单滑出等交互效果。

3. 围绕 Z 轴旋转

rotateZ() 方法用于围绕 Z 轴旋转，Z 轴垂直于屏幕平面。这实际上与 2D 变换中的 rotate() 函数效果相同，但它是 3D 变换体系的一部分。

<!DOCTYPE html>
<html>
<head>
    <style>
        .box-z {
            width: 100px;
            height: 100px;
            background-color: #F44336; /* 红色 */
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div class="box-z"></div>
</body>
</html>

视觉效果：

元素以其中心为支点，在屏幕平面上进行顺时针或逆时针旋转。
虽然看起来是平面的，但在 3D 空间中，它依然占据特定的 Z 轴角度，可以与其他 3D 变换组合使用。

最佳实践

仅仅使用 rotate 函数往往只能看到扁平的变形，要获得真正的 3D 纵深感，必须配合以下技术：

1. `perspective`

perspective 属性定义了在 3D 空间中，观察者（用户眼睛）距离 Z=0 平面的距离。

作用：数值越小，3D 效果越强烈（透视变形越大）；数值越大，效果越平淡（接近平行投影）。
用法：通常应用在父容器上，而不是变换元素本身。

.container {
    /* 设置观察距离为 800px */
    perspective: 800px;
}

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

如果没有 perspective，rotateY 只会让元素变窄，而不会产生近大远小的立体感。

2. 结合过渡与动画

3D 变换最适合用于动态交互。通过 transition 或 animation，可以让旋转过程平滑自然。

.box {
    transition: transform 0.6s ease-in-out;
}

.box:hover {
    transform: rotateY(180deg);
}

3. 跨浏览器测试

虽然现代浏览器对 3D 变换支持良好，但在某些旧版本移动浏览器中可能需要添加厂商前缀（如 -webkit-transform）。此外，不同设备的 GPU 渲染能力不同，复杂的 3D 场景需注意性能优化。

总结

三轴定义：X 轴控制上下翻转，Y 轴控制左右翻转，Z 轴控制平面旋转。
深度关键：单独使用 rotate 可能缺乏立体感，必须在父容器上设置 perspective 属性才能激活真实的 3D 空间透视。
组合使用：可以同时链式调用多个旋转函数（如 rotateX(30deg) rotateY(45deg)）来创建复杂姿态。
性能与体验：配合 transition 实现平滑动画，并注意在移动端设备上的性能表现。
坐标系：记住旋转是相对于元素自身的中心点（默认 transform-origin: 50% 50%）进行的，可以通过修改 transform-origin 改变旋转支点。

思考题

透视效果差异：如果一个父容器的 perspective 分别设置为 200px 和 2000px，当子元素执行 rotateY(45deg) 时，视觉上会有什么显著区别？哪种情况看起来更像真实的物体？
旋转顺序影响：CSS 中的变换函数是有顺序依赖的。请思考 transform: rotateX(90deg) rotateY(90deg) 和 transform: rotateY(90deg) rotateX(90deg) 的最终结果是否相同？为什么？
背面可见性：当一个元素绕 Y 轴旋转 180 度后，默认情况下我们还能看到它吗？如果不能，应该使用哪个 CSS 属性来控制背面的可见性（提示：backface-visibility）？

源本科技 | 码上会

学习目标

正文内容

什么是 3D 变换

三大旋转轴

1. 围绕 X 轴旋转

2. 围绕 Y 轴旋转

3. 围绕 Z 轴旋转

最佳实践

1. perspective

2. 结合过渡与动画

3. 跨浏览器测试

总结

思考题

1. `perspective`