CSS实现简单的3D旋转魔方

要实现简单的3D旋转魔方，你可以使用CSS的transform属性来实现旋转效果。

首先，创建一个HTML元素作为魔方的容器：

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

然后，使用CSS样式来定义魔方的外观和动画效果：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  animation: spin 10s infinite linear;
}

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

.cube .face {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: #aaa;
  opacity: 0.8;
}

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

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

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

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

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

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

这样，你就可以看到一个简单的3D旋转魔方效果了。你可以根据需要调整容器的尺寸和样式，以及动画的持续时间和效果。