CSS3 是一種新的網頁排版技術，它提供了更豐富的樣式和動畫效果。其中，正方體自轉動畫是一種很受歡迎的效果。下面我們來看看如何實現。

/* 定義正方體 */
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
/* 定義正方體的每個面 */
.cube .face {
position: absolute;
width: 100px;
height: 100px;
backface-visibility: hidden;
}
.cube .front {
transform: translateZ(50px);
background-color: red;
}
.cube .back {
transform: rotateY(180deg) translateZ(50px);
background-color: blue;
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
background-color: green;
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
background-color: orange;
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
background-color: yellow;
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: purple;
}
/* 定義旋轉動畫 */
@keyframes spin {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

首先，我們定義一個名為“cube”的 div 元素，它是整個正方體的容器，通過添加 transform-style: preserve-3d; 屬性，讓容器中的所有子元素都保持 3D 空間效果。

然后，我們定義正方體的每個面，通過設置不同的 transform 屬性，讓每個面圍繞不同的軸旋轉，表示不同的方向。同時，我們通過 backface-visibility: hidden; 屬性，讓正方體各個面在旋轉時不會出現透視錯位的效果。

最后，我們定義一個名為“spin”的關鍵幀動畫，讓整個正方體以 Y 軸為中心旋轉起來。通過 animation 屬性將動畫應用于容器元素，設置動畫時間為 5 秒（也可以根據需要修改），設置動畫模式為線性運動，設置動畫次數為無限循環。

通過以上代碼，我們可以輕松地實現一個帶有自轉效果的三維正方體。在實際開發中，我們可以根據需求進行修改和擴展，打造更加炫酷的動態效果。