CSS3是網頁設計中的重要技術，它可以實現各種特效和動畫效果。其中，CSS3立體正方形效果是很酷的一種效果。下面我們來學習一下如何使用CSS3制作立體正方形。

.box {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
}
.box::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
transform: rotateY(90deg);
}
.box::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
transform: rotateX(90deg);
}

代碼分為三部分，首先是.box類，定義了正方形的寬度、高度和位置，同時通過transform-style屬性指定3D效果。接下來通過偽元素::after和::before分別實現正方形的兩個面，寬度和高度與.box完全一致，通過rotateX或rotateY屬性實現旋轉。

通過CSS3制作立體正方形效果可以讓網頁設計更加生動豐富，值得我們去學習和掌握。