🍞 我用 CSS 画了一个会转的 3D 立方体，同事以为我学了 Three.js(这节课真的很神奇，我很喜欢)

写在前面：今天这节课太有趣了！老师带我们用一个纯 CSS 就做出了 3D 旋转立方体，还顺带把 Flex 布局、行内块级、定位这些知识点串了一遍。我原来以为 3D 效果得用 Canvas 或者 Three.js 才能做，结果 CSS 说："放着我来！"------而且它还自带 GPU 加速，性能比我想象中好得多。

一、CSS 3D：不用 JS，也能玩转立体效果

1.1 CSS 3D 的核心：perspective + transform-style

老师说：

"CSS 属性去触发 3D 绘制，不止 3D，还会带来 GPU 加速。哪怕是 2D 界面，有时我们也会手动 3D 化。"

做 CSS 3D 效果，有两个核心属性：

属性	作用	比喻
`perspective`	设置视距，决定 3D 效果的"立体感"强弱	你离物体越远，透视越明显
`transform-style: preserve-3d`	让子元素在 3D 空间中保持立体关系	告诉浏览器："里面的元素都是立体的，别压扁了"

css 复制代码

.box-wrap {
    width: 200px;
    height: 200px;
    perspective: 600px;  /* 3D 核心：视距 */
}

.box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;  /* 保持 3D 空间 */
    animation: rotate 5s linear infinite;
}

perspective: 600px 就像你站在 600 像素远的地方看一个物体。 视距越小，3D 效果越夸张；视距越大，效果越平缓。

1.2 六面体的 HTML 结构

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 ：负责设置视距（perspective）。
中层 box ：负责保持 3D 空间（transform-style: preserve-3d）和旋转动画。
内层 6 个 face ：立方体的六个面，每个面用 transform 定位到正确位置。

这就像搭积木：先搭一个框架（box-wrap），再在框架里放一个可以旋转的盒子（box），最后给盒子的六个面贴上不同的颜色。

1.3 六个面的 3D 定位：translate + rotate 的组合拳

css 复制代码

.face {
    width: 200px;
    height: 200px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    opacity: 0.7;
}

.front  { background-color: #4299e1; transform: translateZ(100px); }
.back   { background-color: #f5656f; transform: translateZ(-100px) rotateY(180deg); }
.left   { background-color: #48bb78; transform: translateX(-100px) rotateY(-90deg); }
.right  { background-color: #48bb78; transform: translateX(100px) rotateY(90deg); }
.top    { background-color: #ecc94b; transform: translateY(-100px) rotateX(90deg); }
.bottom { background-color: #ecc94b; transform: translateY(100px) rotateX(-90deg); }

每个面的定位逻辑：

面	移动	旋转	效果
前	`translateZ(100px)`	无	往前推 100px
后	`translateZ(-100px)`	`rotateY(180deg)`	往后推，再转 180 度（面朝外）
左	`translateX(-100px)`	`rotateY(-90deg)`	往左推，逆时针转 90 度
右	`translateX(100px)`	`rotateY(90deg)`	往右推，顺时针转 90 度
上	`translateY(-100px)`	`rotateX(90deg)`	往上推，绕 X 轴转 90 度
下	`translateY(100px)`	`rotateX(-90deg)`	往下推，绕 X 轴转 -90 度

核心思路：先平移到正确位置，再旋转到正确朝向。

这就像你折纸盒子：先把纸剪成六个正方形（face），然后分别折到前后左右上下六个方向，最后粘起来。

1.4 旋转动画：@keyframes 让立方体转起来

css 复制代码

@keyframes rotate {
    100% {
        transform: rotateY(360deg);
    }
}

.box {
    animation: rotate 5s linear infinite;
}

rotate：动画名字。
5s：一次动画持续 5 秒。
linear：匀速旋转。
infinite：无限循环。
rotateY(360deg)：绕 Y 轴旋转 360 度。

animation 是 CSS 的"动作导演"------你告诉它怎么动、动多久、动几次，它就帮你自动执行。

二、Flex 布局：现代前端的"万能胶水"

2.1 为什么要用 Flex？

老师说：

"弹性布局，移动端视窗大小多变最常用布局。"

传统布局靠 float 和 position，代码复杂、兼容性差。Flex 布局出现后，一行 display: flex 就能搞定大部分对齐问题。

2.2 水平垂直居中：Flex 的"招牌菜"

css 复制代码

html, body {
    height: 100vh;  /* 视窗高度的 100% */
    display: flex;
    flex-direction: row;  /* 主轴方向：水平 */
    justify-content: center;  /* 主轴对齐：居中 */
    align-items: center;      /* 次轴对齐：居中 */
}

三行代码，搞定水平垂直居中！ 这在以前要用 position: absolute + top: 50% + transform: translate(-50%, -50%) 才能实现。

属性	作用	方向
`justify-content`	主轴对齐	水平（默认）或垂直
`align-items`	次轴对齐	垂直（默认）或水平

flex-direction: row 时，主轴是水平方向，次轴是垂直方向。 如果改成 column，主轴和次轴就交换了。

这就像你排队：

row：大家横着排（像食堂打饭的队伍）。
column：大家竖着排（像电梯里站的人）。

2.3 flex: 1：子元素均分空间

html 复制代码

<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

css 复制代码

.box {
    display: flex;
}
.item {
    flex: 1;  /* 每个子元素均分剩余空间 */
    background-color: #f00;
    text-align: center;
}

flex: 1 表示"我要占一份剩余空间"。 四个子元素都设 flex: 1，就均分成四等份。

这就像分蛋糕：四个人都说"我要一份"，蛋糕就被切成四等份，每人一份。

三、行内 vs 块级：CSS 的"性格分类"

3.1 HTML 元素的两种"性格"

老师说：

"HTML 元素有两类：行内、块级。"

类型	代表元素	特点
块级（block）	`div`、`ul`、`p`、`h1`	独占一行，可以设置宽高
行内（inline）	`span`、`a`、`strong`	不独占一行，不能设置宽高

html 复制代码

<div class="box">1</div>
<div class="box">2</div>

两个 div 会上下排列，因为 div 是块级元素，独占一行。

3.2 inline-block：行内块级的"混血儿"

css 复制代码

.box {
    background-color: #f00;
    display: inline-block;  /* 行内块级 */
    width: 50%;
}

inline-block 是行内和块级的"混血儿"：

不会把兄弟挤下去（像行内元素一样并排）。
又可以设置宽高（像块级元素一样）。

但老师警告：inline-block 默认有个天坑------空格符会占据一定大小！

html 复制代码

<div class="box">1</div>
<div class="box">2</div>

两个 inline-block 的 div 之间如果有换行或空格，浏览器会把它当成一个字符，占据一定宽度。结果两个 50% 宽度的 div 就挤不下一行了！

解决方案：

去掉 HTML 中的换行和空格。
或者给父元素设 font-size: 0，再在子元素上恢复 font-size。

这就像两个人并排站：本来位置刚好够，但中间突然多出来一个"隐形人"（空格），结果就挤不下了。

3.3 display 的进化路线

老师总结了 display 的进化：

scss 复制代码

浏览器默认块级/行内
    ↓
display 手动切换 inline / block
    ↓
格式化上下文（flex / inline-block / grid）

display 不只是切换行内/块级，还能开启更强大的布局模式。

四、viewport 单位：响应式布局的"利器"

4.1 vh 和 vw：相对于视窗的尺寸

css 复制代码

html, body {
    height: 100vh;
}

单位	含义	计算方式
`vh`	viewport height	1vh = 视窗高度的 1%
`vw`	viewport width	1vw = 视窗宽度的 1%

100vh 就是视窗高度的 100%，无论屏幕多大，都能占满整个视窗。

老师说：

"100 份（等比例）。移动端适配。viewport-height、viewport-width。"

vh 和 vw 是 CSS3 新增的单位，特别适合移动端适配。因为手机屏幕尺寸千差万别，用 px 写死会出问题，用 vh/vw 就能自动适配。

这就像你用百分比而不是固定尺寸来画图------画布大了，画也跟着大；画布小了，画也跟着小。

五、定位：relative vs absolute

5.1 相对定位：相对于自己原来的位置

css 复制代码

position: relative;

相对于元素原来的位置进行偏移，但元素仍然占据原来的空间。

5.2 绝对定位：相对于最近的定位祖先

css 复制代码

position: absolute;

相对于最近的 position 不为 static 的祖先元素进行定位。 如果没有这样的祖先，就相对于 <html> 定位。

在我们的 3D 立方体中：

css 复制代码

.box {
    position: relative;  /* 作为 face 的定位参考 */
}

.face {
    position: absolute;  /* 相对于 box 定位 */
}

box 设 relative，face 设 absolute------这样六个面就能相对于盒子精确定位。

这就像你在房间里贴海报：

relative：你站在房间中央，告诉海报"往左移 10cm"。
absolute：你直接把海报贴在墙上，位置是相对于墙的。

六、总结：CSS 比你想象中强大

知识点	说明
`perspective`	3D 视距，决定立体感强弱
`transform-style: preserve-3d`	保持子元素的 3D 空间关系
`translateX/Y/Z`	3D 平移
`rotateX/Y`	3D 旋转
`@keyframes` + `animation`	CSS 动画
`display: flex`	弹性布局
`justify-content` / `align-items`	主轴/次轴对齐
`flex: 1`	均分剩余空间
`inline-block`	行内块级，可设宽高但会并排
`vh/vw`	相对于视窗的响应式单位
`position: relative/absolute`	相对/绝对定位

CSS 不只是"美化页面"的工具，它能做 3D 效果、动画、复杂布局。 而且 CSS 3D 自带 GPU 加速，性能往往比用 JS 实现更好。

写在最后

今天这节课真的太有趣了！亲手用纯 CSS 做出了一个旋转的 3D 立方体，还搞懂了 Flex 布局、行内块级、viewport 单位这些知识点。原来 CSS 这么强大，以前只会用它调颜色和间距，真是大材小用了。

下次面试官问你："CSS 怎么做 3D 效果？"

你可以淡定地说：

"CSS 3D 主要用两个属性：perspective 设置视距，transform-style: preserve-3d 保持 3D 空间。然后用 translateX/Y/Z 定位元素在 3D 空间中的位置，用 rotateX/Y 旋转元素。配合 @keyframes 和 animation 可以实现旋转动画。CSS 3D 自带 GPU 加速，性能很好。"

然后看着面试官惊讶的表情，心里默念：这波，又稳了。

本文所有代码示例均来自课堂学习资料，真实可运行。