在前端開發中，我們經常需要使用 CSS 來制作各種動態效果，比如旋轉效果。今天我們就來學習如何使用 CSS 來制作一個左右旋轉的正方體。

/* 定義正方體樣式 */
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: all 1s ease;
}
/* 定義正方體的各個面 */
.cube:before, .cube:after,
.cube .front, .cube .back,
.cube .top, .cube .bottom {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #333;
}
/* 定義正方體各個面的位置和顏色 */
.cube:before {
transform: translateZ(50px);
background-color: blue;
}
.cube:after {
transform: translateZ(-50px);
background-color: red;
}
.cube .front {
transform: translateZ(50px);
background-color: green;
}
.cube .back {
transform: rotateY(180deg) translateZ(50px);
background-color: yellow;
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
background-color: purple;
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: orange;
}
/* 定義鼠標懸停時的動畫效果 */
.cube:hover {
transform: rotateY(180deg);
}

我們先定義了一個類名為 cube 的樣式，同時需要使用 transform-style: preserve-3d 屬性來將正方體的各個面進行統一旋轉。接下來我們定義了正方體的每個面的樣式，包括顏色和位置等。注意，通過 before 和 after 選擇器，我們為正方體添加了前后兩個面。

最后，我們給 cube 類名添加了一個鼠標懸停時的動畫效果，通過旋轉 Y 軸實現正方體的左右旋轉。

這樣，我們就成功地使用 CSS 制作了一個左右旋轉的正方體。當然，這只是 CSS 動畫的入門示例，如果需要制作更加復雜的動畫效果，我們還需要深入學習更多的 CSS 技術和相關知識。