立方體是一種基本的三維圖形，而 CSS 動畫允許我們以純 CSS 的方式為其增加動態效果。本文將介紹如何使用 CSS 實現立方體在不同方向上的旋轉動畫。

/* HTML 代碼 */
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side right"></div>
<div class="side left"></div>
<div class="side top"></div>
<div class="side bottom"></div>
</div>
/* CSS 代碼 */
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 5s linear infinite;
}
.side {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px solid #000;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-90deg) translateX(100px);
}
.left {
transform: rotateY(90deg) translateX(-100px);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
}
.bottom {
transform: rotateX(90deg) translateY(100px);
}
@keyframes rotate {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}

在 HTML 代碼中，我們創建了一個容器，其中包含六個面元素。在 CSS 代碼中，我們為容器添加了 3D 效果，并對每個面進行了變換。其中，使用了 translateZ 實現了前后方向上的移動，使用了 rotateY 及 translateX 實現了左右方向上的旋轉和移動，使用了 rotateX 及 translateY 實現了上下方向上的旋轉和移動。

最后，我們使用了 keyframes 關鍵字定義了 rotate 動畫，該動畫將容器沿著 Y 軸旋轉 360 度，以實現立方體的旋轉效果。