CSS3是網頁設計中的重要語言，它可以實現很多有趣的效果。其中3D立體效果是最常用的之一，下面我們來學習如何使用CSS3制作一個簡單的3D正方形。

/* 3D正方形的CSS代碼 */
.box {
position: relative;
margin: 100px auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: rotateBox 3s linear infinite;
}
.box:before, .box:after {
content: '';
position: absolute;
width: 100px;
height: 100px;
background-color: #50C5B7;
opacity: 0.5;
}
/* 正面 */
.box:before {
transform: translateZ(50px);
}
/* 背面 */
.box:after {
transform: rotateY(180deg) translateZ(50px);
}
/* 動畫效果 */
@keyframes rotateBox {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

代碼中的.box是指正方形的整體容器，它需要設置position:relative屬性來讓子元素.absolute屬性生效。同時，為了使立體效果生效，還需要設置transform-style:preserve-3d屬性。另外，3D動畫效果是通過設置animation屬性實現的。

.box:before和.box:after是正方形的兩個面，它們都是絕對定位的半透明的背景色塊，其中.box:before是正面，而.box:after是背面。在設置其位置時需要使用transform屬性中的translateZ和rotateY屬性，前者負責整體位置的平移，后者負責3D旋轉。

最后是動畫效果，通過設置@keyframes來創建一個旋轉360度的動畫效果。具體實現原理是：以立方體的重心為中心進行旋轉，旋轉的角度由rotateX、rotateY和rotateZ決定。通過設置3D旋轉中的不同屬性，可以生成更多有趣的效果。

以上是本文的3D正方形的CSS代碼，復制它并粘貼到你的CSS文件中，便可以在網頁中實現相應的效果，希望對你有所幫助。