眾所周知，CSS 動畫能夠為網(wǎng)站添加各種各樣的特效效果，使網(wǎng)站更加生動有趣。其中，CSS 正方體動畫是常見的一種動畫效果，下面就來介紹一下如何使用 CSS 制作正方體動畫。

/* CSS 代碼 */
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(45deg) rotateX(45deg);
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
background-color: #f00;
opacity: 0.8;
transform: translateZ(50px);
}
.cube__face--top {
transform: rotateX(90deg) translateZ(50px);
background-color: #0f0;
}
.cube__face--right {
transform: rotateY(90deg) translateZ(50px);
background-color: #00f;
}
.cube__face--bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: #ff0;
}
.cube__face--left {
transform: rotateY(-90deg) translateZ(50px);
background-color: #f0f;
}
.cube__face--back {
transform: rotateY(180deg) translateZ(50px);
background-color: #0ff;
}

以上 CSS 代碼實現(xiàn)了一個正方體，共有六個面，每個面都是一個單獨的 div 元素。通過使用 transform 屬性配合 rotateX、rotateY 和 translateZ 等屬性，可以實現(xiàn)各自不同的旋轉(zhuǎn)和位移效果，從而組成了一個三維的正方體。

接下來，我們將正方體進行動畫處理，實現(xiàn)旋轉(zhuǎn)的效果。

/* CSS 代碼 */
.cube {
/* 此處省略 */
animation: spin 6s linear infinite;
}
.cube__face {
/* 此處省略 */
}
.cube__face--top {
/* 此處省略 */
}
.cube__face--right {
/* 此處省略 */
}
.cube__face--bottom {
/* 此處省略 */
}
.cube__face--left {
/* 此處省略 */
}
.cube__face--back {
/* 此處省略 */
}
@keyframes spin {
0% { transform: rotateY(0deg) rotateX(0deg); }
100% { transform: rotateY(360deg) rotateX(360deg); }
}

通過在 .cube 元素上添加 animation 屬性，來實現(xiàn)每 6 秒鐘旋轉(zhuǎn)一圈的效果。同時，定義了一個 keyframes，讓正方體從 0 度旋轉(zhuǎn)到 360 度旋轉(zhuǎn)。

以上就是關(guān)于 CSS 正方體動畫的全部內(nèi)容，CSS 的魔力讓實現(xiàn)動畫變得如此簡單。