在CSS3中，我們可以用一些新的屬性和技巧實(shí)現(xiàn)創(chuàng)建正方體的效果。

.cube {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.cube .face {
position: absolute;
width: 100px;
height: 100px;
opacity: 0.8;
}
.cube .front {
transform: translateZ(50px);
background-color: #FF3B3F;
}
.cube .back {
transform: rotateY(180deg) translateZ(50px);
background-color: #2EC4B6;
}
.cube .top {
transform: rotateX(90deg) translateZ(50px);
background-color: #FFC300;
}
.cube .bottom {
transform: rotateX(-90deg) translateZ(50px);
background-color: #FF5733;
}
.cube .left {
transform: rotateY(-90deg) translateZ(50px);
background-color: #DAF7A6;
}
.cube .right {
transform: rotateY(90deg) translateZ(50px);
background-color: #A9DEF9;
}

在這段代碼中，我們首先創(chuàng)建了一個(gè)容器 div .cube ，并將其 transform-style 屬性設(shè)置為 preserve-3d ，這是讓其內(nèi)部元素在三維空間中呈現(xiàn)的關(guān)鍵步驟。

接著，我們?yōu)槿萜鞯拿總€(gè)面創(chuàng)建了一個(gè) div 元素，并設(shè)置其 position 為 absolute ，這是為了讓每個(gè)面都能夠在同一空間內(nèi)旋轉(zhuǎn)。隨后，使用 transform 屬性來(lái)分別為每個(gè)面設(shè)置其在 3D空間中的位置和姿態(tài)，從而得到一個(gè)立體的正方體。最后設(shè)置各個(gè)面的背景顏色，完成效果的呈現(xiàn)。