前言

在前端实现 3D 效果时很多人第一反应是去找 Three.js、WebGL 之类的“大杀器”。CSS 已经自带了完整的 3D 引擎——不需要任何第三方库。只要几行样式就能在浏览器里渲染出一个完整的 3D 立方体，而且天然支持 GPU 加速，性能毫不逊色。本篇文章从最基础的布局原理讲起，一步步引入 CSS 3D 的主要属性。最终帮助你写出一个持续旋转、六面不同色的 3D 立方体。所有代码均已实战验证，直接复制即可跑通。老实说，

一、先聊布局：HTML5 的三次进化

在进入 3D 世界之前。需要先把地基打牢，CSS 3D 的关键属性与布局程序高度耦合，布局不扎实后面的 3D 实现会“一头雾水”。

常见痛点的观点是，块级/行内概念混淆导致定位失效

很多新人在使用 position:absolute 时会发现元素根本不在预期位置。根源往往是父容器没有正确设置 display 或者忘记给父元素添加定位上下文。

再看行内与块级，浏览器的默认剧本

类型	代表元素	能设宽高？	会独占一行？
块级	, ,	可以	会
行内	。,	不可以	不会

浏览器为每种元素设定了默认的显示方式，你可以随时通过 display 翻盘：

div { display: inline;/* 块级变行内 */ }
span { display: block;/* 行内变块级 */ }

inline-block：鱼和熊掌兼得

有时需要既能设宽高，又不把兄弟元素挤下去。说起来，这时就用 display:inline-block。

前

后

.box {
background-color: #8ab;display: inline-block;width: 百分之四十八;margin: 1%，}

TIPS：.box{font-size:0}/压缩空白或把标签写在同一行都可以消除“inline‑block 空隙”。说起来，这一步对后面建立立方体的“面叠放”很关键。其实，

Flexbox：现代布局的银弹

If you’re still using inline‑block for complex UI。you’ll soon hit its limitations—especially when you need vertical centering or equal‑height columns. Flexbox solves se problems elegantly.

.container {
display: flex;}
.item {
说到flex，1;background:#5a9;text-align:center;}

• 父容器管布局方向：#container{flex-direction:row|column}
• Main‑axis 对齐：#container{justify-content:center}
• Cros​s‑axis 对齐：#container{align-items:center}
• The flexibility makes it default choice for responsive designs.

二、水平垂直居中：从土办法到最优解

再看常见痛点，传统居中方案兼容性差、代码冗余、需要知道子元素尺寸。

The most robust way today is using Flex on root elements:

html。body {
height的观点是，100%;
display: flex;
justify-content: center;/* 水平居中 */
align-items: center;/* 垂直居中 */
}

• The trick is setting a definite height on both  and  .
• No need for “translate” s.
• This method works regardless of child size.

至于附赠。CSS 3 新视口单位

body{
至于height，100vh;width :100vw;}

• 100vh = Viewport Height
• 50vw = half of viewport width

三、定位程序：relative 与 absolute 的共生关系

建立立方体时每个面必须叠放在同一点，再分别平移/旋转。全靠定位实现这方面，

• relative 不改变自身文档流。却创建了最近的已定位祖先。
• absolute 脱离文档流，相对最近的已定位祖先进行定位。
• 所有面统一使用 left/top =0，随后交给 transform 完成空间分配。

四、主要：CSS 3D 属性详解

1️⃣ perspective — “相机”距离视口的距离

.scene{ perspective :800px;/* 数值越小感越强 */ }

• 小数值 → 强
• 大数值 → 平缓
• 注意：必须写在 **场景父容器** 上，否则无效。

常见痛点这方面，把 perspective 写在 .cube 本身导致立方体没有深度感。

.cube{ transform-style :preserve-３d;}

• 默认 flat → 子元素被拍扁成二维图片。
• 显式声明 preserve‑３d 才能让每个面保持独立 Z 坐标。
• 没有它，你永远只能看到一张二维贴图。

从常见踩坑来看，忘记加 preserve‑３d 导致旋转动画看起来像平面翻页。

假设立方体边长为 100px，则半边长为 50px。每个面都要先沿 Z轴平移 50px 再做对应旋转。

="" transform:translatex="" transform:translatey="" transform:translatez="" transform:translatez;="" }="" }<="" 上="" 下="" 前="" 右="" 后="" 左="">

/* 顺序很关键！translateZ → rotateX/Y/Z */

.cube{ animation:spin 6s linear infinite;}

@keyframes spin{ from{transform:rotateX rotateY;} to{transform:rotateX rotateY;} }

// 注意不能用逗号分隔多个函数 // translateZ rotateY ≠ rotateY translateZ

/ / / pr

• / TIPS ：使用 translateZ 把面推出屏幕，确保它们不会互相遮挡。

css

Sorry but I think this answer is incomplete due to formatting errors in my previous attempt.

---