CSS 3D 世界：从盒子模型到三维空间动画

用纯 CSS 打造炫酷 3D 立方体，解锁浏览器 GPU 加速的视觉魔法

在 HTML5 时代，<canvas> 标签让我们可以用 JS 绘制 3D 图形，但 CSS 同样拥有一套强大的 3D 变换能力。通过 perspective、transform-style: preserve-3d 和 translateZ 等属性，我们可以轻松构建出立体感十足的三维场景，而且------这一切都由浏览器的 GPU 硬件加速，性能表现极其流畅。

本文将从布局基础 入手，逐步讲解定位机制 、弹性布局（Flexbox） ，最终带你实现一个旋转的 3D 立方体，彻底搞懂 CSS 3D 的核心概念。

---

一、布局基石：盒子模型与视口单位

在开始 3D 之前，我们先要打好 2D 布局的地基。

1.1 块级 vs 行内元素

HTML 元素主要分为两类：

类型	特点	示例
块级元素（block）	独占一行，可设置宽高	<div>、<ul>、<p>
行内元素（inline）	不换行，不能设置宽高	<span>、<a>、<em>

css

/* 手动切换显示模式 */
.box {
  display: inline;      /* 变成行内 */
  display: inline-block; /* 行内但可设宽高 */
  display: block;        /* 变成块级 */
}

1.2 视口单位：vh / vw

CSS3 引入了视口单位，让元素尺寸与浏览器窗口大小挂钩：

• 100vh = 视口高度的 100%
• 100vw = 视口宽度的 100%

这对于移动端适配非常友好，再也不用写死 px 值了。

css

html, body {
  height: 100vh;    /* 撑满整个视口高度 */
  width: 100vw;     /* 撑满整个视口宽度 */
}

---

二、布局进阶：Flexbox 弹性布局

display: flex 会开启弹性格式化上下文，让子元素在主轴和交叉轴上灵活排列。

2.1 基础用法

css

body {
  display: flex;
  flex-direction: row;        /* 主轴方向：行（默认） */
  justify-content: center;    /* 主轴居中 */
  align-items: center;        /* 交叉轴居中 */
}

2.2 等分布局：flex: 1

当父容器为 flex 时，子元素设置 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;           /* 每个 item 宽度相等 */
  text-align: center;
}

这就是一个典型的四等分导航栏布局，移动端开发中极其常用。

2.3 inline-block 的坑

inline-block 元素之间的换行符/空格会被渲染为一个小间隙：

html

<div class="box">1</div>
<div class="box">2</div>
<!-- 两个 div 之间会产生空隙 -->

解决方案：要么去掉 HTML 中的换行，要么用 flex 替代。

---

三、定位机制：让元素"飞"起来

CSS 定位决定了元素在文档流中的位置行为：

定位值	说明
static	默认值，遵循正常文档流
relative	相对自身原位置偏移，不影响其他元素
absolute	脱离文档流，相对于最近的非 static 父级定位
fixed	相对于视口固定定位
sticky	粘性定位，滚动到阈值时固定

在 3D 场景中，六个面都需要用 position: absolute 叠加在同一位置，然后通过 3D 变换分别偏移出去。

---

四、核心实战：纯 CSS 3D 立方体

4.1 HTML 结构

一个立方体有 6 个面：前、后、左、右、上、下。

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>

4.2 关键 CSS 属性

① perspective ------ 视距

给父容器加上 perspective，相当于设置"观察者到屏幕的距离"，值越小，3D 效果越强烈。

css

.box-wrap {
  perspective: 600px;   /* 视距 600px */
}

② transform-style: preserve-3d ------ 保留 3D 空间

子元素默认是扁平化的（flat），必须设置为 preserve-3d 才能让子元素在三维空间中定位。

css

.box {
  transform-style: preserve-3d;
}

③ 六个面的 3D 变换

每个面都是 200px × 200px，先 position: absolute 叠在一起，再分别位移 + 旋转：

css

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

/* 前：Z 轴正方向 100px */
.front {
  background: #4299e1;
  transform: translateZ(100px);
}

/* 后：Z 轴负方向 100px，再绕 Y 转 180° */
.back {
  background: #f00;
  transform: translateZ(-100px) rotateY(180deg);
}

/* 左：X 轴负方向 100px，绕 Y 逆时针转 90° */
.left {
  background: #0f0;
  transform: translateX(-100px) rotateY(-90deg);
}

/* 右：X 轴正方向 100px，绕 Y 顺时针转 90° */
.right {
  background: #00f;
  transform: translateX(100px) rotateY(90deg);
}

/* 上：Y 轴负方向 100px，绕 X 顺时针转 90° */
.top {
  background: #0ff;
  transform: translateY(-100px) rotateX(90deg);
}

/* 下：Y 轴正方向 100px，绕 X 逆时针转 90° */
.bottom {
  background: #f0f;
  transform: translateY(100px) rotateX(-90deg);
}

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

使用 CSS 动画让立方体绕 Y 轴匀速旋转：

css

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

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

这样一来，一个完整的、带 3D 透视的旋转立方体就诞生了！🎉

---

五、知识点全景总结

技术点	作用
vh/vw	视口相对单位，移动端适配利器
display: flex	弹性布局，轻松实现居中/等分
inline-block	行内但可设置宽高，注意空格间隙
position: absolute	脱离文档流，叠加六个面
perspective	设置 3D 视距，增强立体感
transform-style: preserve-3d	保留子元素的三维空间位置
translateZ / translateX / translateY	在三维空间中移动元素
rotateX / rotateY	绕 X/Y 轴旋转
@keyframes	定义动画关键帧
animation	应用动画到元素

---

六、写在最后

CSS 3D 并不是一个"花架子"，它在产品展示、全景轮播、3D 菜单、数据可视化大屏等场景中都有着广泛的应用。而且，由于 GPU 硬件加速的支持，CSS 3D 动画往往比纯 JS 实现的性能更好。

💡 小思考：如果把这个立方体的六个面换成图片，是不是就是一个 3D 相册了？如果再结合 transform-origin 和 perspective-origin，能不能做出一只"3D 蝴蝶"？

CSS 的世界远不止"布局"这么简单，它正在变得越来越强大。掌握 3D 变换，就是打开了通往视觉创意大门的一把钥匙。