CSS3中的3D旋轉球體是一種非常神奇的效果。利用CSS3的transform屬性，我們可以輕松地創建一個立體感十足的球體，而且不需要任何JavaScript的幫助。那么，究竟如何實現這個效果呢？下面詳細介紹CSS3中創建3D旋轉球體的方法。

/* 定義3D旋轉球體的樣式 */
.sphere {
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
.sphere:before, .sphere:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.7;
}
.sphere:before {
background: #ff8080;
transform: rotateY(45deg) rotateX(35deg) translateZ(50px);
}
.sphere:after {
background: #ffc080;
transform: rotateY(135deg) rotateX(-35deg) translateZ(50px);
}
/* 定義3D旋轉球體的動畫效果 */
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.sphere {
animation: rotate 5s linear infinite;
}

以上代碼就是用于創建一個簡單的3D旋轉球體的樣式。首先通過設置position為relative和perspective為1000px，將球體放置在3D場景中。transform-style屬性設置為preserve-3d，表示子元素遵循父元素的3D變換效果。通過:before和:after偽元素來創建兩個半球面，同時使用border-radius屬性將它們切成圓形。transform屬性則用于將它們旋轉并平移到球體的兩側。最后，用@keyframes定義一個不斷旋轉的動畫，讓整個球體產生動態效果。

這是一個簡單的3D旋轉球體，雖然只有兩個半球面，但是通過設置不同的顏色可以輕松擴展為完整的球體。同時，我們還可以使用更多的3D變換效果，例如scale、translate等，來創建更豐富的3D效果。