CSS3是一種新的網頁設計技術，可以帶來更加豐富的UI體驗。其中，3D效果是其中比較受歡迎的一種特效，可以讓內容更加生動有趣。在CSS3中實現3D效果有很多種方式，其中正方體效果是比較經典的一種。

/* 設置正方體容器的樣式 */
.cube-container {
position: relative;
margin: 50px auto;
width: 200px;
height: 200px;
perspective: 600px; /* 透視距離 */
}
/* 設置正方體的樣式 */
.cube {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d; /* 設置變換的樣式 */
transition: transform 0.5s ease-in-out; /* 設置動畫效果 */
}
/* 設置正方體的各個面 */
.cube-front {
position: absolute;
width: 200px;
height: 200px;
background-color: #dd4b39;
transform: translateZ(100px); /* 向前移動100px */
}
.cube-back {
position: absolute;
width: 200px;
height: 200px;
background-color: #00a65a;
transform: rotateY(180deg) translateZ(100px); /* 向后翻轉180度，向前移動100px */
}
.cube-right {
position: absolute;
width: 200px;
height: 200px;
background-color: #3c8dbc;
transform: rotateY(90deg) translateZ(100px); /* 向右翻轉90度，向前移動100px */
}
.cube-left {
position: absolute;
width: 200px;
height: 200px;
background-color: #f39c12;
transform: rotateY(-90deg) translateZ(100px); /* 向左翻轉90度，向前移動100px */
}
.cube-top {
position: absolute;
width: 200px;
height: 200px;
background-color: #605ca8;
transform: rotateX(90deg) translateZ(100px); /* 向上翻轉90度，向前移動100px */
}
.cube-bottom {
position: absolute;
width: 200px;
height: 200px;
background-color: #f56954;
transform: rotateX(-90deg) translateZ(100px); /* 向下翻轉90度，向前移動100px */
}
/* 鼠標懸停時觸發翻轉動畫 */
.cube:hover {
transform: rotateY(180deg);
}

以上是一段CSS3代碼實現正方體3D效果的代碼。其中，

.cube-container

是正方體容器的樣式，設定了容器的位置、大小、透視距離等屬性。具體的正方體樣式代碼在

.cube

中，使用變換樣式實現正方體的翻轉效果，同時設定了變換的過渡動畫效果。各個面的樣式由

.cube-front

到

.cube-bottom

一一定義，同時也使用變換樣式設定了面的位置和樣式。在鼠標懸浮時，通過設置

:hover

偽類觸發正方體的翻轉動畫。

CSS3正方體3D效果非常實用，可以為網頁帶來更加豐富的視覺體驗。大家可以根據自己的需要進行調整和優化，實現更加個性化的3D效果。