CSS 如何实现 3D 立方体？

Question

CSS 如何实现 3D 立方体？

仓乃文 · Accepted Answer

3D 立方体通过 6 个面分别设置不同的 rotate 和 translateZ 变换，配合 perspective 和 transform-style 实现可旋转的立方体。

```css
.cube-scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 8s infinite linear;
}

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

.front  { transform: translateZ(100px); background: #ff6b6b; }
.back   { transform: rotateY(180deg) translateZ(100px); background: #feca57; }
.right  { transform: rotateY(90deg) translateZ(100px); background: #48dbfb; }
.left   { transform: rotateY(-90deg) translateZ(100px); background: #ff9ff3; }
.top    { transform: rotateX(90deg) translateZ(100px); background: #1dd1a1; }
.bottom { transform: rotateX(-90deg) translateZ(100px); background: #a29bfe; }

@keyframes spin {
  from { transform: rotateX(-20deg) rotateY(0deg); }
  to { transform: rotateX(-20deg) rotateY(360deg); }
}
```

补充说明：
- 6 个面先旋转再平移，translateZ(100px) 将面推到立方体对应位置
- 立方体边长 = translateZ 值 × 2 = 200px
- 动画 rotateX(-20deg) 让立方体微微倾斜，能看到顶面
- 适合 3D 轮播、产品展示、Loading 动画等场景