CSS是網頁設計中不可或缺的一部分，它可以實現各種驚艷的效果。其中，立方體旋轉是一種常見的效果，下面就來學習一下如何用CSS實現一個簡單的立方體旋轉。

/* 首先，我們需要定義一個立方體的div */
#cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /* 定義3D立方體 */
}
/* 接著，定義立方體的各個面 */
#cube div {
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0.8;
}
#cube .front {
transform: translateZ(100px); /* 定義前面 */
}
#cube .back {
transform: translateZ(-100px) rotateY(180deg); /* 定義后面 */
}
#cube .right {
transform: rotateY(90deg) translateZ(100px); /* 定義右面 */
}
#cube .left {
transform: rotateY(-90deg) translateZ(100px); /* 定義左面 */
}
#cube .top {
transform: rotateX(90deg) translateZ(100px); /* 定義上面 */
}
#cube .bottom {
transform: rotateX(-90deg) translateZ(100px); /* 定義下面 */
}
/* 最后，給立方體添加動畫效果 */
@keyframes rotate {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#cube {
animation: rotate 10s linear infinite; /* 持續10秒的旋轉動畫 */
}

以上代碼就可以實現一個簡單的立方體旋轉效果。代碼中，我們首先定義了一個id為“cube”的div，它代表整個立方體。然后，我們定義了立方體的六個面，分別是front、back、right、left、top和bottom。我們使用transform屬性對每個面進行3D變換，從而讓它們成為了立方體的六個面。

最后，我們使用keyframes和animation屬性對立方體進行旋轉動畫。在keyframes中，我們定義了從0度到360度的旋轉過程，然后在立方體的樣式中，使用animation屬性指定動畫效果。

使用CSS寫立方體旋轉并不難。只要使用合適的CSS屬性和動畫效果，就可以實現一個驚艷的立方體旋轉效果。有了這個效果，網頁的視覺效果將得到大幅提升。