立方體是一個立體圖形，它由六個正方形組成，每個正方形都相互連接在一起。要想讓立方體動起來，我們可以使用CSS的transform屬性對其進行旋轉。下面我們來介紹如何實現立方體的左右旋轉。

.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
box-sizing: border-box;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}

以上代碼定義了一個class為cube的立方體，其中用到了CSS3的transform屬性及其相關內容。transform-style屬性用于定義子元素如何在三維空間中顯示，preserve-3d表示按照原樣保留子元素的三維結構。translateZ屬性可以沿著Z軸的方向移動元素，正數表示向屏幕內部移動，負數表示向屏幕外部移動。rotateY和rotateX屬性用于繞Y軸和X軸旋轉元素，單位為度數。

接下來，我們看到了立方體的六個面：front、back、right、left、top、bottom。每個面都具有class為cube-face，該class定義了面的基本樣式。我們對每一面應用不同的transform屬性來讓立方體實現左右旋轉。其中，front面直接位于Z軸上方，back面需要先繞Y軸旋轉180度再位于Z軸上方，right和left面繞Y軸旋轉90度和-90度后位于Z軸上方，top和bottom面繞X軸旋轉90度和-90度后位于Z軸上方。

通過以上代碼和說明，我們可以輕松實現立方體的左右旋轉效果，為網頁增添更多的動態效果和趣味性。