【CSS 3D 实战】从零实现旋转立方体：理解 3D 空间的核心原理
前言
在前端开发中，CSS 3D 变换是一个既有趣又实用的技术点。它能让原本平面的网页元素产生立体感，为用户带来更丰富的视觉体验。本文将通过实现一个旋转的 3D 立方体，带你深入理解 CSS 3D 的核心概念和实现方式。
效果图
这个案例虽然简单，但包含了 CSS 3D 开发的所有基础要素，非常适合初学者入门。完成后，你将掌握如何创建 3D 空间、如何定位 3D 元素以及如何实现 3D 动画。
实现原理详解
1. 建立 3D 空间的核心要素
要实现 3D 效果，有两个必不可少的 CSS 属性：
perspective：定义了观察者与 3D 空间之间的距离，值越小，3D 效果越明显。这个属性需要设置在父容器上，为子元素创建一个 3D 观察环境。transform-style: preserve-3d：确保子元素能够保持 3D 空间关系，而不是被扁平化成 2D 平面。这个属性需要设置在包含 3D 子元素的容器上。
2. 立方体的构成
一个立方体有 6 个面，我们需要创建 6 个元素来代表这些面，并通过 3D 变换将它们放置在正确的位置：
- 前面（front）：使用
translateZ(150px)向屏幕外移动（Z 轴正方向） - 后面（back）：使用
translateZ(-150px)向屏幕内移动（Z 轴负方向），并旋转 180° 使文字正向显示 - 左面（left）：向左移动 150px 并绕 Y 轴旋转 -90°
- 右面（right）：向右移动 150px 并绕 Y 轴旋转 90°
- 上面（top）：向上移动 150px 并绕 X 轴旋转 90°
- 下面（bottom）：向下移动 150px 并绕 X 轴旋转 -90°
注意：因为我们的立方体边长是 300px，所以每个方向需要移动 150px（边长的一半）才能正确拼接成一个立方体。
3. 旋转动画实现
通过 @keyframes 定义一个旋转动画，让立方体同时绕 X 轴和 Y 轴旋转：
@keyframes rotateCube {0% { transform: rotateX(0deg) rotateY(0deg); }100% { transform: rotateX(360deg) rotateY(360deg); }
}
然后将这个动画应用到立方体容器上，设置 10 秒完成一次旋转，并无限循环：
.cube {/* 其他样式 */animation: rotateCube 10s linear infinite;
}
4. 增强交互体验
为了让效果更加生动，我们添加了一些交互效果：
- 鼠标悬停时暂停动画：
animation-play-state: paused - 悬停时轻微放大立方体：
transform: scale(1.05) - 悬停在某个面上时，增加不透明度和发光效果
常见问题与解决方案
问题：立方体看起来是扁平的，没有立体感
解决：检查是否在父容器设置了perspective，以及是否在立方体容器上设置了transform-style: preserve-3d问题：某些面的文字是倒着的
解决：需要适当旋转这些面，如后面需要旋转 180° 才能让文字正向显示问题：面之间的位置不对，无法形成立方体
解决：确保每个面的移动距离是立方体边长的一半，并且旋转角度正确
总结
通过这个 3D 立方体案例，我们学习了 CSS 3D 开发的核心概念和基本技巧。关键在于理解 3D 坐标系、正确设置透视效果和保留 3D 空间关系。
这个案例可以进一步扩展，比如：
- 增加更复杂的纹理或图片作为立方体表面
- 添加更丰富的交互，如通过鼠标拖拽控制旋转方向
- 结合 JavaScript 实现更复杂的动画效果