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旋转魔方效果了。你可以根据需要调整容器的尺寸和样式，以及动画的持续时间和效果。