3D 立方体旋转特效（纯 CSS，速度/尺寸/旋转轴实时可调）

效果演示（真实可交互）

完整代码

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

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;          /* 视距越近 3D 感越强 */
}
.cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 10s linear infinite;
}
.face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.35);
  color: #fff;
  backface-visibility: hidden;
}
.front  { background: #6c8cff; transform: rotateY(0deg)    translateZ(100px); }
.back   { background: #ff8ecf; transform: rotateY(180deg)  translateZ(100px); }
.right  { background: #4be3ac; transform: rotateY(90deg)   translateZ(100px); }
.left   { background: #ffc145; transform: rotateY(-90deg)  translateZ(100px); }
.top    { background: #a96cff; transform: rotateX(90deg)   translateZ(100px); }
.bottom { background: #ff5f6d; transform: rotateX(-90deg)  translateZ(100px); }

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

关键三要素：perspective（视距）、transform-style: preserve-3d（子元素保持 3D 空间）、translateZ(边长/2)（把每个面推到立方体表面）。

参数说明

兼容性与性能

• 纯 CSS 3D，无 JS、无图片、无字体请求，一个文件即完整组件
• transform 动画由 GPU 合成器负责，六面立方体持续旋转的 CPU 开销可忽略
• Chrome / Safari / Firefox / Edge 全支持；iOS Safari 需前缀 -webkit-transform-style: preserve-3d（演示已含兼容写法）
• 不支持的旧浏览器中立方体退化为「扁平六色块」平铺，内容不丢失（优雅降级）

常见问题

Q: 面与面之间有缝隙或重叠怎么办？ 几乎都是 translateZ 与边长不匹配导致的。记住公式：translateZ = 边长 / 2，且所有面的 width/height 必须一致；改用 inset: 0 让面自动继承父级尺寸可避免手填尺寸出错。

Q: 想让立方体里面显示内容（如相册）怎么做？ 去掉 backface-visibility: hidden，把图片放在各面即可实现「内窥」效果；如需半透明外壳，给面加 rgba() 背景与 opacity。

Q: 移动端卡顿怎么办？ 降低旋转频率（如 20s 一圈），并避免在立方体外层叠加 filter/box-shadow 等触发重绘的属性；若仍卡顿，可缩小立方体尺寸减少像素覆盖。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，可自由改色改速。