CSS3的出現為網頁設計帶來了更多的可能性，例如可以使用CSS3制作出各種立體效果。其中，立體正方體是一個非常經典的示例。下面我們來一起學習如何使用CSS3制作一個立體正方體。

.cube{
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
}
.cube .front, .cube .back, .cube .left, .cube .right, .cube .top, .cube .bottom{
position: absolute;
width: 100px;
height: 100px;
background-color: #333;
opacity: 0.7;
}
.cube .front{
transform: translateZ(50px);
}
.cube .back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .left{
transform: translateX(-50px) rotateY(-90deg);
}
.cube .right{
transform: translateX(50px) rotateY(90deg);
}
.cube .top{
transform: translateY(-50px) rotateX(90deg);
}
.cube .bottom{
transform: translateY(50px) rotateX(-90deg);
}

上述代碼中的.cube是定義立方體的容器，其中的六個面使用了絕對定位，并通過transform屬性來實現立體效果。通過不同的transform屬性值，可以實現平移、旋轉等效果，使六個面組合成一個立方體。

除了上述代碼外，我們還需要為立方體添加透視效果，這樣才能體現立體效果。我們可以在容器上使用transform-style: preserve-3d屬性來設置。

使用CSS3制作立體正方體，是一個展示CSS3技術的非常好的實例。通過不斷的學習和實踐，我們可以制作出更加復雜的立體效果，讓網頁設計更加生動、有趣。