正方體是一種基礎幾何形狀，對于網(wǎng)頁設計來說，有時候需要在頁面中使用到這個形狀。在HTML5和CSS3的技術下，我們可以用以下代碼制作一個帶有陰影效果的正方體：

<style>
.cube {
width: 100px;
height: 100px;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cube:before,
.cube:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background: #fff;
opacity: 0.5;
box-shadow: 0 0 10px #000;
}
.cube:before {
-webkit-transform: rotateX(90deg) translateZ(50px);
transform: rotateX(90deg) translateZ(50px);
}
.cube:after {
-webkit-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px);
}
</style>
<div class="cube"></div>

這個代碼利用了CSS3中的3D轉(zhuǎn)換和偽元素，先使用position屬性使正方體和偽元素都處于相對定位下，再利用transform-style:preserve-3d屬性開啟3D空間。接著用偽元素來分別繪制正方體的兩個面，通過rotateX和rotateY屬性分別使它們繞X和Y軸旋轉(zhuǎn)90度，從而實現(xiàn)了正方體的3D效果。 HTML代碼中只需一個div元素并賦予class類名cube即可，之后可以根據(jù)需要在這個元素內(nèi)部添加需要顯示的內(nèi)容。