如何运用CSS3绘制外观精美的旋转立方体？

这里是一个使用 CSS3 画旋转立方体的代码示例：

HTML 代码：

<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

CSS 代码：

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

.side {
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 2px solid black;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: translateZ(-50px) rotateY(180deg);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes spin {
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

解析：

• .cube 为一个正方体容器，使用 transform-style: preserve-3d; 让其子元素在 3D 空间内保持立体。
• .front、.back、.right、.left、.top、.bottom 分别为正方体的六个面，使用 transform: translateZ(50px); 等属性让它们在 3D 空间内摆放。其中，.front 的 z 轴坐标为正，表示正方体的前面；.back 的 z 轴坐标为负，表示正方体的后面；.right 的 y 轴旋转 90 度，表示正方体的右面；.left 的 y 轴旋转 -90 度，表示正方体的左面；.top 的 x 轴旋转 90 度，表示正方体的上面；.bottom 的 x 轴旋转 -90 度，表示正方体的下面。
• @keyframes 中的 spin 动画使用 transform: rotateY(360deg) rotateX(360deg); 让正方体绕 y 轴和 x 轴不断旋转，使正方体呈现出旋转的效果。

效果如下：