利用HTML制作一个旋转正方体

可以利用CSS3的3D变换来制作一个旋转正方体，具体代码如下：

HTML部分：

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

CSS部分：

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

.side {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
}

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

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

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

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

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

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

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

解释一下CSS部分的代码：

- `.cube`是外层容器，设置了宽高、位置和3D变换样式`transform-style: preserve-3d`，并且添加了旋转动画`animation`。
- `.side`是每个面的样式，设置了宽高、背景颜色和边框。
- `.front`表示正面，通过`translateZ`将其移动到正中间。
- `.back`表示背面，通过`rotateY`将其翻转到背面，并且也通过`translateZ`将其移动到正中间。
- `.left`表示左侧面，通过`rotateY`将其翻转到左侧，并且也通过`translateZ`将其移动到正中间。
- `.right`表示右侧面，通过`rotateY`将其翻转到右侧，并且也通过`translateZ`将其移动到正中间。
- `.top`表示顶部面，通过`rotateX`将其翻转到顶部，并且也通过`translateZ`将其移动到正中间。
- `.bottom`表示底部面，通过`rotateX`将其翻转到底部，并且也通过`translateZ`将其移动到正中间。
- `@keyframes rotate`是旋转动画，从0%到100%旋转360度。