如何用CSS实现一个可旋转的3D立方体效果

使用CSS可以仅通过样式规则就让六个平面组合成一个立体方块，并让它不停旋转。这种方式不依赖脚本，适合做网页装饰或加载动画。下面先看一个基础示例的视觉呈现。

一、HTML结构

立方体由容器和六个面组成，每个面用单独的元素表示：

<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>

二、CSS核心样式

要让子元素处于同一三维空间，父级需设置transform-style: preserve-3d，并用perspective定义观察距离。

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 100px auto;
}
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 8s linear infinite;
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(80, 160, 255, 0.7);
  border: 1px solid #fff;
  line-height: 200px;
  text-align: center;
  font-size: 24px;
}

三、六个面的位置计算

每个面先按自身方向旋转，再向外平移边长的一半（此处为100px）：

.front  { transform: rotateY(0deg)   translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg)  translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg)  translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

四、旋转动画

通过关键帧让整个立方体沿X轴和Y轴同时转动：

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

五、常见问题

• 如果面没有立体感，检查是否漏写transform-style: preserve-3d。
• 立方体看起来扁平，可增大perspective数值或缩小元素。
• 动画卡顿可改用will-change: transform提升性能。

纯CSS 3D立方体重点在于空间思维的转换：每一个面都是先转向再推出，组合后便是封闭方块。

六、完整示例整合

<style>
.scene { width:200px; height:200px; perspective:800px; margin:100px auto; }
.cube { width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:spin 8s linear infinite; }
.face { position:absolute; width:200px; height:200px; background:rgba(80,160,255,0.7); border:1px solid #fff; line-height:200px; text-align:center; font-size:24px; }
.front { transform:rotateY(0deg) translateZ(100px); }
.back { transform:rotateY(180deg) translateZ(100px); }
.right { transform:rotateY(90deg) translateZ(100px); }
.left { transform:rotateY(-90deg) translateZ(100px); }
.top { transform:rotateX(90deg) translateZ(100px); }
.bottom { transform:rotateX(-90deg) translateZ(100px); }
@keyframes spin { from { transform:rotateX(0) rotateY(0); } to { transform:rotateX(360deg) rotateY(360deg); } }
</style>
<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>

将上述代码保存为HTML文件即可在浏览器看到连续旋转的3D立方体，你可以修改动画时间和颜色来实现不同奇幻风格。

CSS3Dtransformanimationpreserve_3drotate修改时间：2026-07-25 07:45:23