用html+css+js做一个会旋转的正方体

以下是一个简单的会旋转的正方体的HTML CSS和JS代码：

HTML代码：

<div class="cube">
  <div class="face face1"></div>
  <div class="face face2"></div>
  <div class="face face3"></div>
  <div class="face face4"></div>
  <div class="face face5"></div>
  <div class="face face6"></div>
</div>

CSS代码：

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

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.face1 {
  background-color: red;
  transform: rotateY(0deg) translateZ(50px);
}

.face2 {
  background-color: orange;
  transform: rotateY(90deg) translateZ(50px);
}

.face3 {
  background-color: yellow;
  transform: rotateY(180deg) translateZ(50px);
}

.face4 {
  background-color: green;
  transform: rotateY(-90deg) translateZ(50px);
}

.face5 {
  background-color: blue;
  transform: rotateX(90deg) translateZ(50px);
}

.face6 {
  background-color: purple;
  transform: rotateX(-90deg) translateZ(50px);
}

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

JS代码：

// 无需JavaScript代码

这是一个基本的CSS 3D转换示例，其中包含6个面，每个面都使用不同的颜色进行填充。通过使用CSS动画，该立方体将无限旋转。