CSS 3D transforms為web開發帶來了一些新的特效，使頁面的可視化呈現更加靈活。本教程將教您如何使用CSS旋轉正方體。

/*設置正方體父容器*/
.box{
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d; /*3D變換立方體中的子元素位置關系不變*/
transform: perspective(500px); /*透視效果*/
}
/*設置正方體的所有面*/
.box div{
position: absolute;
width: 200px;
height: 200px;
background: #ccc;
}
/*設置正方形上面的面*/
.box div.up{
transform: rotateX(-90deg) translateZ(100px);
}
/*設置正方形下面的面*/
.box div.down{
transform: rotateX(90deg) translateZ(100px);
}
/*設置正方形左面的面*/
.box div.left{
transform: rotateY(-90deg) translateZ(100px);
}
/*設置正方形右面的面*/
.box div.right{
transform: rotateY(90deg) translateZ(100px);
}
/*設置正方形前面的面*/
.box div.front{
transform: translateZ(100px);
}
/*設置正方形后面的面*/
.box div.back{
transform: rotateY(180deg) translateZ(100px);
}

首先，我們需要設置正方體的父容器樣式，并為每個面添加一個樣式。接下來，我們為立方體的每個面應用不同的變形，使其形成一個完整的正方體。通過旋轉和變形，我們使立方體的每個面以立體視角按正確的位置呈現。

現在，您可以自由地修改立方體的樣式，以便通過3D變換創建各種其他形狀的3D圖形。CSS 3D transforms是一個強大的工具，為web開發人員帶來更加靈活的視覺效果。