今天我來給大家介紹一種炫酷的CSS立方體動畫，讓你的網站頁面更加生動有趣。首先，我們需要創建一個立方體的HTML結構，包含6個面，每個面都是一個div元素。代碼如下：

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

接下來，我們使用CSS對每個面進行樣式設置，并在hover時添加動畫效果。代碼如下：

.cube {
position: relative;
transform-style: preserve-3d;
width: 200px;
height: 200px;
}
.front, .back, .left, .right, .top, .bottom {
position: absolute;
width: 200px;
height: 200px;
background: #fff;
box-shadow: inset 0 0 0 3px #000;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.left {
transform: rotateY(-90deg) translateX(-100px);
}
.right {
transform: rotateY(90deg) translateX(100px);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
}
.bottom {
transform: rotateX(90deg) translateY(100px);
}
.cube:hover .front {
animation: rotate 2s linear infinite;
}
.cube:hover .back {
animation: rotate 2s linear infinite;
}
.cube:hover .left {
animation: rotate 2s linear infinite;
}
.cube:hover .right {
animation: rotate 2s linear infinite;
}
.cube:hover .top {
animation: rotate 2s linear infinite;
}
.cube:hover .bottom {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

以上代碼中，我們使用了CSS3中的transform和animation屬性來實現立方體的旋轉動畫。通過對每個面的transform屬性進行設置，我們讓立方體在3D空間中呈現出立體效果。在hover狀態下，我們使用animation屬性設置動畫的播放效果，讓立方體在不斷旋轉。

最后，我們的立方體動畫就完成了。你可以將這段代碼復制到你的網頁中，并進行修改和適配。也可以添加更多的交互效果和樣式，讓你的頁面更加與眾不同。