CSS 3D：从布局到立方体
初学CSS 3D时，很多人误以为它只是一堆旋转和透视的炫技。但深入实践后会发现，CSS不仅能胜任2D布局，还能借助一系列3D属性，在浏览器中直接构建立体空间。
CSS 3D的真正价值远不止“做出3D效果”——它还能触发GPU加速实现性能优化。有时，即便是一个纯2D界面，开发者也会刻意加上translateZ(0)来强制启用硬件加速，让动画更顺滑。这一思路与Canvas里getContext('webgl')调用显卡如出一辙：浏览器中凡涉及渲染，最终都依赖GPU的表现。
在正式进入3D世界之前，必须先扎实掌握布局基础知识。原因在于：CSS 3D的本质是在“已经布局好的盒子上叠加空间变换”——布局没有搞清楚，变换就无从下手。
布局：外层负责布局，内层负责内容
这句话值得反复强调：
听起来像一句废话，但在实际开发中，它是非常重要的拆分原则。例如下面这个3D立方体的HTML结构：
<div class="box-wrap">
<div class="box">
<div class="face front">前div>
<div class="face back">后div>
<div class="face left">左div>
<div class="face right">右div>
<div class="face top">上div>
<div class="face bottom">下div>
div>
div>.box-wrap是外层，决定“立方体放在页面中的位置”；.box是中层，决定“立方体整体的旋转”；.face是内层，决定“每个面的样式和内容”。
这种“布局与内容分离”的思路在后文中会反复出现。编写CSS时如果不分开，很容易出现“修改一处样式却把整个结构打乱”的情况。
水平垂直居中：先有视口，再谈居中
布局中最常见的需求就是“水平垂直居中”。我们从最基础的视口单位讲起。
vh / vw：视口单位
让一个元素铺满全屏，最直接的做法如下：
html, body {
width: 100%; /* 块级元素宽度默认 100% */
height: 100vh; /* CSS3 新增的视口单位 */
}vh 是 viewport-height，vw 是 viewport-width。它们将整个屏幕（PC端、移动端等）等比例分为100份，从而实现移动端适配。
但移动端存在一个典型问题：在Safari等浏览器上，100vh 有时会包含地址栏和工具栏的高度，导致元素超出预期。此时可以考虑使用 100dvh（动态视口高度）作为更精准的替代方案——当地址栏滑出时高度会自动调整。
flex 实现水平垂直居中
有了全屏视口之后，居中交给flex即可：
html, body {
display: flex;
flex-direction: column; /* 定义主轴方向，剩余方向即为次轴 */
justify-content: center; /* 主轴对齐方式 */
align-items: center; /* 次轴对齐方式 */
}三个关键点：
display: flex会在当前盒子内开启弹性格式化上下文；flex-direction决定主轴方向，另一方向即为次轴；justify-content控制主轴，align-items控制次轴。
flex 是移动端视窗大小多变情况下最常用的布局方案。后续所有的居中场景，几乎都是这种“父容器flex + 子元素居中”的模式。
行内 / 块级元素：display 属性的本质
布局搞懂之后，下一个容易混淆的点是 display 属性。HTML元素本身分为两类：
- 块级元素（
div、ul等）display默认值为block- 独占一行
- 可以设置宽高
- 用于构建盒子结构
- 行内元素（
span等）display默认值为inline- 不独占一行
- 无法设置宽高
- 用于包裹文字、超链接、图片等内容
浏览器会给某些元素默认的 display 行为，但我们可以通过 display 手动切换 inline / block，将块级元素改为行内元素，或反之。
flex：父与子的布局关系
当设置 display: flex 时，会在当前盒子（即flex容器）内开启一个弹性格式化上下文。弹性布局描述的是父元素与子元素之间的布局关系，子元素默认会沿主轴对齐，受到父元素的约束。
示例 3.html 清晰地体现了这一点：
<div class="box">
<div class="item">1div>
<div class="item">2div>
<div class="item">3div>
<div class="item">4div>
div>.box {
/* 弹性布局中，子元素默认沿主轴对齐，受父元素约束，开启格式化上下文 */
display: flex;
}
.item {
flex: 1;
background-color: #9c1818;
width: 50%;
text-align: center;
}四个 .item 均设置了 flex: 1，它们会平均分配主轴空间，无论 width: 50% 具体是多少。这正是flex“父管布局”的特性。
inline-block 的经典坑：空白字符间隙
display: inline-block 是一个介于行内与块级之间的属性值：
- 不独占一行
- 同时可以设置宽高
但它有一个著名的坑——默认的空格符会占据一定大小。HTML源码中的换行、回车、空格，都会被浏览器渲染成一个空白字符，导致两个设置 50% 宽度的盒子总宽度超过 100%，第二个盒子被挤到下一行。
2.html 就是对这个坑的复现：
<div class="box">1div>
<div class="box">2div>.box {
background-color: #9c1818;
display: inline-block;
width: 50%;
/* 两个 50% 宽度盒子 + 间隙 > 100%，第二个会被挤到下一行 */
}解决方法有几种：
- 将HTML标签紧挨着写，不留空白；
- 父元素设置
font-size: 0，子元素再单独设置字号； - 直接使用
flex布局，完全避开inline-block的这个坑。
实际开发中，能用flex就别用inline-block做布局——这是从实践中总结出的重要经验。
定位：relative 与 absolute
讲完display，下一个基础是定位。CSS 3D中六面立方体的每个面都需要用绝对定位叠加在一起，因此必须先理清这个知识点。
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */relative：相对于自身原有位置偏移，仍然占据文档流；absolute：脱离文档流，相对于最近的非static定位祖先元素进行偏移。
在立方体例子中，.box 设置为 position: relative，作为定位上下文；六个 .face 都是 position: absolute，全部叠加在 .box 的左上角，然后通过 translate 将它们各自移到对应方向。这正是“外层relative + 内层absolute”的经典组合。
CSS 3D 核心：perspective 与 transform-style
补完布局基础后，正式进入3D世界。CSS 3D的核心实际上只有两个属性。
perspective：视距
perspective 定义了观察者到z=0平面的距离，单位是px。它决定了3D效果的“透视强度”——值越小，透视越夸张（近大远小越明显）；值越大，越接近正交投影。
.box-wrap {
width: 200px;
height: 200px;
perspective: 600px; /* 3D 核心：视距 */
}注意：perspective 必须写在需要被透视的元素的父元素上，而不是写在元素本身。这是一个非常容易踩的坑。
transform-style: preserve-3d
光有 perspective 还不够。默认情况下，子元素会被“压平”在父元素的平面上；要构建3D立方体，必须让父元素保留子元素的3D空间：
.box {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /* 保留子元素的 3D 空间 */
animation: rotate 6s linear infinite;
}transform-style: preserve-3d 是实现3D立方体的关键语句。缺少它，六个面会被压成一个平面，无论怎么 translateZ 都没有效果。
六面立方体：translate + rotate 的组合
理解了以上两个核心属性后，构建立方体就变成了一个几何问题。一个200×200的立方体，每个面都需要从原点（左上角）移动到对应的方位。
先把每个面叠在原点
六个面共用一组基础样式，先用绝对定位将它们叠在 .box 的左上角：
.face {
width: 200px;
height: 200px;
left: -50px; /* (100 - 200) / 2，让面相对外层 100x100 居中 */
top: -50px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #b41c1c;
opacity: 0.8;
}这里的 left: -50px 和 top: -50px 是为了将200×200的面相对外层100×100的容器居中偏移（(100-200)/2 = -50）。
沿三根轴将每个面推出去
立方体的六个面对应三根轴的正负方向。每个面的操作都是“先沿轴平移100px，再旋转到对应朝向”：
.front { background: #429911; transform: translateZ(100px); } /* 朝前，沿 z 轴正方向 */
.back { background: #114299; transform: translateZ(-100px) rotateY(180deg); } /* 朝后，先后退再翻转 */
.left { background: #994211; transform: translateX(-100px) rotateY(-90deg); } /* 逆时针为负 */
.right { background: #429911; transform: translateX(100px) rotateY(90deg); } /* 顺时针为正 */
.top { background: #994211; transform: translateY(-100px) rotateX(90deg); }
.bottom { background: #429911; transform: translateY(100px) rotateX(-90deg); }这里有一个容易记混的地方：旋转方向。
rotateY(90deg)：绕Y轴顺时针旋转90度（从+Y轴方向看向原点）；rotateY(-90deg)：逆时针旋转。
为什么 left 面要先 translateX(-100px) 再 rotateY(-90deg)？因为如果先旋转再平移，平移方向会跟着旋转矩阵变化，容易算错。采用先平移到位置再旋转朝向的顺序，是更不容易出错的处理方式。
顺序很重要：translate 在前，rotate 在后
CSS的 transform 是从右往左执行的，但当我们写在一起时，习惯上把“想先做的”放在右边。因此：
transform: translateX(-100px) rotateY(-90deg);实际执行顺序是：先执行 rotateY(-90deg) 将面旋转到朝左，再执行 translateX(-100px) 沿旋转后的x轴推出100px。这听起来和上面“先平移再旋转”矛盾——但实际上不矛盾，因为CSS里 translateX 在字符串中写在前面，意味着它作用于“已被后面rotate改变过的坐标系”。建议将它作为一个约定来记忆：
记住这个公式，六个面都能直接写出来。
旋转动画：@keyframes
立方体构建完成后，最后一步是让它旋转起来。CSS动画的核心是 @keyframes 配合 animation 属性。
.box {
animation: rotate 6s linear infinite;
}
@keyframes rotate {
0% { transform: rotateX(0deg) rotateY(0deg); }
25% { transform: rotateX(0deg) rotateY(90deg); }
50% { transform: rotateX(0deg) rotateY(180deg); }
75% { transform: rotateX(0deg) rotateY(270deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}animation 是一个简写属性，包含四个关键信息：
- 动画名称（自定义）：
rotate - 动画持续时间（单次时长）：
6s - 动画曲线（变化速率）：
linear，匀速 - 无限循环：
infinite
@keyframes 定义动画的关键帧。这里前75%只绕Y轴旋转，最后25%才加入X轴翻转，整体效果如同“先转一圈观察四面，再翻转观察顶底”。
注意：transform 写在动画中时，每一帧都是完整的变换值，而不是增量。也就是说，50% 那一帧的 rotateY(180deg) 并非“在25%的基础上再增加90度”，而是直接设置为 rotateY(180deg)。这与Canvas中“每帧 += speed”的增量式动画有明显区别。
课后复习：几个容易混淆的知识点
将课程中的几个关键问题整理如下。
1. perspective 写在哪个元素上
写在"被透视元素的父元素"上。写在自身则不生效，写在更远的祖先上也会失效。2. 为什么必须设置 transform-style
默认 transform-style 为 flat，子元素会被压平在父元素平面。preserve-3d 才能保留子元素的 3D 空间，使六个面真正立体堆叠。3. 立方体六面公式
front : translateZ( d)
back : translateZ(-d) rotateY(180deg)
left : translateX(-d) rotateY(-90deg)
right : translateX( d) rotateY( 90deg)
top : translateY(-d) rotateX( 90deg)
bottom: translateY( d) rotateX(-90deg)其中 d 是面到中心的距离，对于200×200的立方体，d = 100。
4. 自测题
vh和vw分别代表什么？为什么移动端推荐使用dvh？inline-block的“空白间隙”是如何产生的？有哪些解决方法？perspective应该写在立方体自身还是父元素上？原因是什么？- 如果不写
transform-style: preserve-3d，立方体会呈现怎样的效果？ - 立方体的
left面为什么使用translateX(-100px) rotateY(-90deg)，而不是反过来？
现在如何理解
写完这篇文章后，对CSS的“绘制”能力有了全新的认识。
CSS 3D并非一门新语言，而是将“布局 + 定位 + 变换”三件事叠加在一起。perspective 提供视距、preserve-3d 保留空间、translate3d / rotate3d 执行变换——三个属性就能把一个2D盒子变成六面立方体。但要让这个立方体真正“正确”，必须打好布局基础：外层与内层的拆分、display 属性的本质、relative + absolute 的组合、flex居中的逻辑。3D是建立在2D布局之上的，缺少2D基础，3D便是空中楼阁。
此外，这节课也再次让人认识到GPU加速的重要性。CSS 3D不仅为了“炫”，更为了“快”——translateZ(0) 这种看似无意义的变换，实际上是在主动调用显卡。这一点与Canvas中的 getContext('webgl') 思路一致：浏览器中凡是需要绘制的内容，最终都要看显卡的性能表现。
inline-block 的空白间隙、100vh 在移动端的坑、perspective 写错位置不生效——这些看似微小的问题，都是真实开发中反复遇到的陷阱。将它们与六面公式一同记下，以后编写3D代码前先回顾一遍，能少走不少弯路。
如果后续要继续往3D方向深入，自然的延伸是three.js——上一节Canvas课中也提到过，AI游戏、3D可视化等领域都离不开它。CSS 3D适合卡片翻转、轮播、轻量级动效，而真正复杂的3D场景需要交给WebGL。但无论选择哪条路，“布局是3D的地基”这一认知，将始终适用。
