🎲 3D 立方体实现教程

我们需要三层结构：外层容器 → 立方体容器 → 六个面

<div class="perspective-container">
  
  <div class="cube">
    
    <div class="cube-face face-front">前</div>
    <div class="cube-face face-back">后</div>
    <div class="cube-face face-right">右</div>
    <div class="cube-face face-left">左</div>
    <div class="cube-face face-top">上</div>
    <div class="cube-face face-bottom">下</div>
  </div>
</div>

透视值决定了 3D 效果的强度，值越小，透视效果越强烈。

.perspective-container {
  width: 200px;
  height: 200px;
  perspective: 800px;  /* 设置透视距离 */
}

这是最关键的一步，让子元素在 3D 空间中渲染。

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;  /* 关键！启用 3D 空间 */
  transition: transform 1s;
}

所有面共享相同的基础样式，使用绝对定位重叠在一起。

.cube-face {
  position: absolute;  /* 绝对定位，重叠在一起 */
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  opacity: 0.9;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

💡 核心概念：坐标系统

首先理解 3D 坐标系：

• X 轴：水平方向（左 ← → 右）
• Y 轴：垂直方向（上 ↑ ↓ 下）
• Z 轴：深度方向（后 ⊙ → 前，指向你的眼睛）

📍 前面（Front）

思路：前面本来就面向你（Z 轴正方向），不需要旋转，直接向前推 100px。

.face-front {
  background: #10b981;
  transform: translateZ(100px);
  /* 不需要旋转，直接向前（Z轴+）移动 100px */
}

📍 后面（Back）

思路：后面需要转 180° 背对你，然后向"它的前方"推 100px（实际是向后）。

💡 为什么用 rotateY？因为是左右转动（像转身），不是上下翻。

.face-back {
  background: #059669;
  transform: rotateY(180deg) translateZ(100px);
  /* 1. 绕 Y 轴旋转 180°（转身背对你）*/
  /* 2. 向前推 100px（此时的"前"是原来的"后"）*/
}

📍 右面（Right）

思路：右面需要向右转 90°，然后向前推 100px。

💡 为什么是 90°？从正面转到右侧，刚好是 90° 的角度。

.face-right {
  background: #34d399;
  transform: rotateY(90deg) translateZ(100px);
  /* 1. 绕 Y 轴向右旋转 90° */
  /* 2. 向前推 100px */
}

📍 左面（Left）

思路：左面需要向左转 90°（负角度），然后向前推 100px。

💡 为什么是 -90°？负数表示反方向，向左转就是 -90°。

.face-left {
  background: #065f46;
  transform: rotateY(-90deg) translateZ(100px);
  /* 1. 绕 Y 轴向左旋转 -90° */
  /* 2. 向前推 100px */
}

📍 上面（Top）

思路：上面需要向上翻 90°，然后向前推 100px。

💡 为什么用 rotateX？因为是上下翻转（像翻书），不是左右转。

.face-top {
  background: #6ee7b7;
  transform: rotateX(90deg) translateZ(100px);
  /* 1. 绕 X 轴向上翻转 90° */
  /* 2. 向前推 100px */
}

📍 下面（Bottom）

思路：下面需要向下翻 90°（负角度），然后向前推 100px。

💡 为什么是 -90°？向下翻是负方向，所以用 -90°。

.face-bottom {
  background: #047857;
  transform: rotateX(-90deg) translateZ(100px);
  /* 1. 绕 X 轴向下翻转 -90° */
  /* 2. 向前推 100px */
}

使用 CSS 动画让立方体持续旋转，展示所有面。

/* 定义旋转动画 */
@keyframes rotateCube {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

/* 应用动画到立方体 */
.cube {
  animation: rotateCube 8s infinite linear;
  /* 8秒完成一次旋转，无限循环，匀速 */
}