CSS 3D 球體是一種在網頁開發中廣泛使用的技術，它可以幫助開發人員創建視覺上引人注目的 3D 效果。通過使用像transform和perspective等 CSS 屬性，可以輕松地創建一個球體。

.sphere {
width: 300px;
height: 300px;
perspective: 500px;
transform-style: preserve-3d;
}
.sphere .face {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.sphere .face1 {
transform: rotateX(90deg) translateZ(150px);
background: #f00;
}
.sphere .face2 {
transform: rotateY(90deg) translateZ(150px);
background: #0f0;
}
.sphere .face3 {
transform: translateZ(150px);
background: #00f;
}
.sphere .face4 {
transform: rotateY(-90deg) translateZ(150px);
background: #ff0;
}
.sphere .face5 {
transform: rotateX(-90deg) translateZ(150px);
background: #0ff;
}

上述代碼使用.sphere類創建一個 300px 的球體，并使用perspective控制遠近和transform-style保持 3D 效果。然后，通過創建 5 個面并分別使用translateZ和rotateX/Y將它們定位在球體上。

在這里，我們只是展示了如何創建基本的球體，但實際上可以通過更改 transform 屬性來創建更復雜的 3D 形狀。 CSS 3D 技術實際上是一項極其強大的工具，可以幫助開發人員在網頁上創建出非常驚人的效果，提高用戶體驗。