CSS正方體旋轉是一個非?？岬男Ч梢宰屇愕木W頁或APP更加生動有趣。這個效果需要相當復雜的CSS代碼，但是只要你耐心學習，就一定可以掌握它。

.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
.cube:hover {
transform: rotateY(180deg);
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.cube-face:nth-child(1) {
transform: rotateY(0);
}
.cube-face:nth-child(2) {
transform: rotateY(90deg);
}
.cube-face:nth-child(3) {
transform: rotateY(180deg);
}
.cube-face:nth-child(4) {
transform: rotateY(-90deg);
}
.cube-face:nth-child(5) {
transform: rotateX(90deg) translateZ(100px);
}
.cube-face:nth-child(6) {
transform: rotateX(-90deg) translateZ(100px);
}

上面的CSS代碼定義了一個名為“cube”的容器，它包含了6個面，每個面用一個矩形表示，通過transform屬性實現旋轉效果。其中的transform-style: preserve-3d;屬性表示3D保留效果，而transition: transform 1s ease-in-out;則是動畫過渡效果。

當鼠標懸停在正方體上時，.cube:hover的選擇器將被觸發，導致正方體順時針旋轉180度。這也是實現CSS正方體旋轉效果的關鍵。

如果你想讓正方體旋轉得更加靈活，還可以使用JavaScript代碼控制鼠標移動事件。

慢慢來，每一步都很重要，相信你一定可以學會CSS正方體旋轉效果，讓你的網頁或APP更加富有視覺吸引力！