魔方自转是很多人最初学习魔方时的难点之一，但借助 CSS 中的 transform 属性，我们可以轻松地实现魔方的自转效果。

.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d; /* 保持 3D 效果 */
animation: rotate 5s infinite linear; /* 定义动画 */
}
.cube div {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
border: 1px solid black;
}
.cube div:nth-child(1) {
transform: translateZ(50px); /* 前面板 */
}
.cube div:nth-child(2) {
transform: rotateY(90deg) translateZ(50px); /* 右面板 */
}
.cube div:nth-child(3) {
transform: rotateY(180deg) translateZ(50px); /* 后面板 */
}
.cube div:nth-child(4) {
transform: rotateY(-90deg) translateZ(50px);  /* 左面板 */
}
.cube div:nth-child(5) {
transform: rotateX(-90deg) translateZ(50px); /* 上面板 */
}
.cube div:nth-child(6) {
transform: rotateX(90deg) translateZ(50px); /* 下面板 */
}
@keyframes rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

在上述代码中，我们定义了一个 .cube 类，它包含了六个 div 子元素，分别代表了魔方的六面。我们利用 transform 属性给这些子元素赋予不同的旋转角度，从而实现了魔方的自转效果。

同时，我们还通过使用 animation 属性和 @keyframes 规则，定义了一个名为 rotate 的动画，使得魔方可以不断地自转。

通过这种 CSS 方式，我们可以轻松地实现魔方的自转效果，并且还可以通过调整 transform 属性的值，来实现更加自由灵活的动画效果。希望这篇文章可以对大家学习魔方及 CSS 动画有所帮助。