CSS 畫立體盒子一直是前端開發中的一個重要技能之一。有了立體盒子的技能，我們可以讓網站更加生動有趣。但是很多人不知道如何實現，接下來我們來學習一下。

.box {
position: relative;
width: 200px;
height: 200px;
perspective: 500px;
}
.box__face {
width: 200px;
height: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.8;
transition: all 0.5s ease-in-out;
}
.box__face--front {
transform: translateZ(100px);
background-color: #ff5d5d;
}
.box__face--back {
transform: rotateY(180deg) translateZ(100px);
background-color: #67d5b5;
}
.box__face--right {
transform: rotateY(90deg) translateZ(100px);
background-color: #abbdff;
}
.box__face--left {
transform: rotateY(-90deg) translateZ(100px);
background-color: #a7ffeb;
}
.box__face--top {
transform: rotateX(90deg) translateZ(100px);
background-color: #ffd56b;
}
.box__face--bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: #8d8d8d;
}
.box:hover .box__face {
opacity: 1;
}

以上是一個基礎的立體盒子的 CSS 代碼。我們首先創建一個具有透視效果的容器，然后在容器中創建六個子元素(div)，每個子元素都代表盒子的一個面。接著通過transform來設置盒子的各個面的旋轉角度，和translate和perspective來控制盒子的向前傾斜。最后通過鼠標hover事件來控制盒子面的透明度，使得整個效果更加生動。

總之，CSS 畫立體盒子雖然看起來很難，但是實際上并不需要太高深的技術，只需要多加練習并且勤于思考，相信大家都可以輕松掌握。