CSS可以創建各種形狀的盒子，其中包括正方體盒子。下面我們來看一下如何使用CSS代碼創建一個簡單的正方體盒子。

.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.cube .side {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
font-size: 24px;
color: #fff;
}
.cube .front {
transform: rotateY(0deg) translateZ(50px);
background-color: #f44336;
}
.cube .back {
transform: rotateY(180deg) translateZ(50px);
background-color: #3f51b5;
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
background-color: #8bc34a;
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: #ffc107;
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
background-color: #4caf50;
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
background-color: #2196f3;
}

首先我們給盒子設置獨立的樣式，寬高都為100px，同時將transform-style屬性設為preserve-3d，這樣在3D效果下才能保持正方體形狀。然后我們通過transform屬性將整個盒子旋轉45度，這樣能讓盒子的三個面可見。

接著我們為每個面創建一個具有絕對定位的節點，寬高與整個盒子相同，這樣每個面都能單獨控制。同時需要設置文本居中，背景顏色以及字體樣式等參數。

接下來就是最重要的了，我們在每個面的樣式中通過transform屬性，將其旋轉到正確的位置。比如，前面的面需要繞著Y軸旋轉0度，同時將其向前移動50px，后面的面需要繞著Y軸旋轉180度，且向前移動50px，以此類推。

最后，我們只需要將每個面不同的背景色加上去，就完成了一個簡單的正方體盒子。