CSS3正方體是一種炫酷的三維效果，在網頁設計中應用廣泛。下面我們來學習一下如何通過CSS3創建一個正方體。 首先，在HTML中創建一個div容器，并在其中創建六個子元素作為正方體的六個面（前、后、左、右、上、下）。代碼如下：

<div class="cube">
<div id="front"></div>
<div id="back"></div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</div>

接著，使用CSS3中的transform屬性給各個面進行旋轉變換。設置每個面的寬度、高度、背景色，并使用絕對定位將所有面放置在正方體的六個不同的面上。代碼如下：

.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
#front {
width: 200px;
height: 200px;
position: absolute;
background-color: red;
transform: translateZ(100px);
}
#back {
width: 200px;
height: 200px;
position: absolute;
background-color: blue;
transform: rotateY(180deg) translateZ(100px);
}
#left {
width: 200px;
height: 200px;
position: absolute;
background-color: purple;
transform: rotateY(-90deg) translateZ(100px);
}
#right {
width: 200px;
height: 200px;
position: absolute;
background-color: green;
transform: rotateY(90deg) translateZ(100px);
}
#top {
width: 200px;
height: 200px;
position: absolute;
background-color: orange;
transform: rotateX(-90deg) translateZ(100px);
}
#bottom {
width: 200px;
height: 200px;
position: absolute;
background-color: yellow;
transform: rotateX(90deg) translateZ(100px);
}

最后，通過CSS3中的動畫屬性，設置正方體的旋轉效果。代碼如下：

@keyframes cubeRotate {
from {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
to {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
.cube {
animation: cubeRotate 5s linear infinite;
}

現在，你就可以在瀏覽器中看到一個炫酷的CSS3正方體了。各位小伙伴可以試著修改代碼，創造自己的獨特效果哦。