今天我們來學習如何使用CSS讓四個盒子3D旋轉，讓我們看一下下面的HTML代碼：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>

我們先給每個盒子加上一些基本的CSS樣式：

.container {
width: 300px;
height: 300px;
position: relative;
perspective: 1000px;
}
.box1, .box2, .box3, .box4 {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background-color: #ccc;
transition: all 1s ease-in-out;
}

這里有一些需要注意的東西：

• 容器需要設置perspective屬性來制作3D效果
• 所有的盒子都需要在水平和垂直方向上居中
• 我們給所有的盒子添加了一個過渡效果

現在，我們來添加3D旋轉效果！這里的關鍵是使用transform屬性。我們將給每個盒子添加它以進行旋轉。這里是樣式代碼：

.box1 {
transform: rotateY(0deg) translateZ(0px);
}
.box2 {
transform: rotateY(90deg) translateZ(0px);
}
.box3 {
transform: rotateY(180deg) translateZ(0px);
}
.box4 {
transform: rotateY(270deg) translateZ(0px);
}
.container:hover .box1 {
transform: rotateY(-90deg) translateZ(150px);
}
.container:hover .box2 {
transform: rotateY(0deg) translateZ(150px);
}
.container:hover .box3 {
transform: rotateY(90deg) translateZ(150px);
}
.container:hover .box4 {
transform: rotateY(180deg) translateZ(150px);
}

這里還需要注意一些東西：

• 我們使用rotateY函數來讓盒子沿Y軸旋轉
• 我們使用translateZ函數來讓盒子沿Z軸移動，這樣它們就會進入3D空間
• 我們使用:hover偽類來添加鼠標懸停效果，以便讓盒子旋轉
• 我們在:hover狀態下改變了每個盒子的旋轉角度和Z軸方向上的位移

現在，希望這篇文章能夠幫助你學會如何使用CSS讓四個盒子3D旋轉！