CSS三維盒子是網頁開發中常見的特效之一。下面是一個CSS三維盒子的示例代碼：

.box {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: center;
transition: transform .5s ease;
}
.box:hover {
transform: rotateX(360deg) rotateY(360deg);
}
.side {
position: absolute;
width: 200px;
height: 200px;
background-color: #ccc;
opacity: 0.8;
box-shadow: inset 0 0 20px rgba(0, 0, 0, .4);
}
.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);
}

對于上面的代碼，我們來逐一解釋一下：

首先，我們創建了一個類名為box的盒子，盒子的寬高為200px，同時我們使用transform-style屬性將它的子元素設為三維變換（preserve-3d）,讓后代元素也能平滑地運動。然后我們設定了過渡屬性，讓盒子在鼠標懸停時通過旋轉變換產生平滑的過渡效果。

下面我們需要設置盒子的六個面，也就是front、back、right、left、top、bottom。這些面的樣式我們全部使用絕對定位，然后使用translateZ屬性設定它們的位置，其中front在Z軸100像素處，后面的面在Z軸上使用旋轉變換（rotateY和rotateX）來使其正著面朝外。

歡迎大家在項目中嘗試使用CSS三維盒子來帶給網頁更好的交互效果！