CSS3變換功能可以用來實現許多有趣的動畫效果，比如立方體動畫。下面我們來學習一下如何使用CSS3實現立方體動畫。

首先，我們需要創建一個立方體的HTML結構。這個立方體由6個面組成，并且每個面都需要添加一個CSS類名。

<div id="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>

接下來，我們需要對每個面進行CSS樣式的設置。我們可以使用CSS3變換功能來讓立方體逐漸旋轉。下面是我們的CSS樣式代碼。

.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.top {
transform: rotateX(-90deg) translateZ(100px);
}
.bottom {
transform: rotateX(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
#cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 1s;
}
#cube:hover {
transform: rotateY(360deg);
}

我們把立方體的每個面使用了不同的變換，這樣可以讓立方體的每個面都能顯示出來。我們還需要在立方體容器的CSS樣式中，將transform-style設置為preserve-3d。這個樣式可以讓當前元素的所有子元素在3D空間中呈現。

最后，我們還需要給立方體容器添加一個鼠標懸停事件。當鼠標懸停在立方體容器上時，它將逐漸旋轉。這個效果在CSS樣式中使用了transition屬性和:hover偽類。

這樣，我們就可以使用CSS3來創建一個簡單的3D立方體動畫啦！