要创建一个立方体，关键在于使用html结构和css 3d变换并保持3d空间关系。首先，用html搭建六个面，通过一个容器包裹整个立方体，并为每个面创建div；接着在css中设置样式，使用position: absolute对各面进行定位，并通过transform调整位置与朝向，同时必须设置transform-style: preserve-3d以维持子元素的3d空间效果；此外，外层容器需设置perspective来控制透视距离，translatez值需准确匹配立方体半径；最后，可添加:hover交互效果实现动态旋转。
要创建一个立方体，HTML 和 CSS 的 3D 变换功能是关键。核心思路是利用多个面组合成一个立方体，并通过 transform-style: preserve-3d 来保持这些面在 3D 空间中的位置关系。
基本结构：用 HTML 搭建六个面
首先，你需要一个容器来包裹整个立方体，再为每个面创建一个 div。通常我们会使用如下结构：
<div class="cube-container">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
这里 .cube-container 是旋转的容器，.cube 是立方体本身，而六个 .face 就是各个面。这样组织结构有助于后续的定位和动画控制。
样式设置：CSS 定位 + transform 定义各面方向
接下来是关键的样式部分。为了让这些面组成一个立方体，需要分别给它们设定位置和朝向：
.cube-container {
perspective: 800px;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
transition: transform 1s;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.1);
border: 1px solid #ccc;
line-height: 200px;
text-align: center;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom{ transform: rotateX(-90deg) translateZ(100px); }
这里有几个重点：
-
transform-style: preserve-3d是必须的，它告诉浏览器不要“扁平化”子元素，让它们能真正处于 3D 空间。 - 每个面都通过
position: absolute定位到同一个原点，然后通过transform移动并旋转到正确的位置。 - 每个面的
translateZ(100px)是为了把它们从中心向外推 100px，因为立方体边长是 200px，半径就是 100px。
配合 transform-style 实现立体感的关键细节
很多人做出来的立方体看起来像一堆重叠的平面，问题往往出在 transform-style 上。如果你没加这个属性，或者父容器没有开启 3D 上下文，那么所有子元素都会被“压扁”，失去立体效果。
举个例子：
如果你只写了 .cube { transform: rotateY(45deg); }，但没有 transform-style: preserve-3d，那每个子元素就会按照二维投影来显示，而不是在真正的三维空间里各自旋转。
另外，记得外层的 .cube-container 设置了 perspective，这相当于设置了观察者与立方体之间的距离，数值越小，透视效果越强烈。
动态交互：添加鼠标悬停旋转效果
如果你想让立方体可以交互，比如鼠标悬停时旋转，只需要加几行代码就行：
.cube-container:hover .cube {
transform: rotateX(30deg) rotateY(-30deg);
}
这样用户一移动鼠标过去，立方体就会自动转起来，增强视觉体验。
基本上就这些步骤。HTML 创建结构，CSS 定位各面，配合 transform-style 维持 3D 关系，再加上一点动画或交互，就能做出一个不错的立方体效果了。不复杂但容易忽略的是那些细节，比如是否开启了 preserve-3d、perspective 是否合理、以及 translateZ 的值是否准确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
