【CSS 3D 实战】从零实现旋转立方体：理解 3D 空间的核心原理

在前端开发中，CSS 3D 变换是一个既有趣又实用的技术点。它能让原本平面的网页元素产生立体感，为用户带来更丰富的视觉体验。本文将通过实现一个旋转的 3D 立方体，带你深入理解 CSS 3D 的核心概念和实现方式。

这个案例虽然简单，但包含了 CSS 3D 开发的所有基础要素，非常适合初学者入门。完成后，你将掌握如何创建 3D 空间、如何定位 3D 元素以及如何实现 3D 动画。

要实现 3D 效果，有两个必不可少的 CSS 属性：

perspective：定义了观察者与 3D 空间之间的距离，值越小，3D 效果越明显。这个属性需要设置在父容器上，为子元素创建一个 3D 观察环境。
transform-style: preserve-3d：确保子元素能够保持 3D 空间关系，而不是被扁平化成 2D 平面。这个属性需要设置在包含 3D 子元素的容器上。

一个立方体有 6 个面，我们需要创建 6 个元素来代表这些面，并通过 3D 变换将它们放置在正确的位置：

注意：因为我们的立方体边长是 300px，所以每个方向需要移动 150px（边长的一半）才能正确拼接成一个立方体。

通过 @keyframes 定义一个旋转动画，让立方体同时绕 X 轴和 Y 轴旋转：

复制代码

@keyframes rotateCube {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

然后将这个动画应用到立方体容器上，设置 10 秒完成一次旋转，并无限循环：

复制代码

.cube {
  /* 其他样式 */
  animation: rotateCube 10s linear infinite;
}

为了让效果更加生动，我们添加了一些交互效果：

问题：立方体看起来是扁平的，没有立体感
解决：检查是否在父容器设置了 perspective，以及是否在立方体容器上设置了 transform-style: preserve-3d
问题：某些面的文字是倒着的
解决：需要适当旋转这些面，如后面需要旋转 180° 才能让文字正向显示
问题：面之间的位置不对，无法形成立方体
解决：确保每个面的移动距离是立方体边长的一半，并且旋转角度正确

通过这个 3D 立方体案例，我们学习了 CSS 3D 开发的核心概念和基本技巧。关键在于理解 3D 坐标系、正确设置透视效果和保留 3D 空间关系。

这个案例可以进一步扩展，比如：