CSS 是網頁設計中不可或缺的一部分，它可以通過多種方式來改變 HTML 頁面的布局和樣式。其中一個非常有趣和實用的應用是通過 CSS 來實現立體球體的效果。

/* 首先我們需要定義一個 div 容器，它將作為我們球的外層容器 */
div {
perspective: 1000px; /* 設置透視距離，使得球的效果更立體 */
width: 200px;
height: 200px;
}
/* 下面我們將通過 CSS 來創建一個球 */
div:before {
content: ""; /* 首先我們需要通過偽元素來添加球的表面 */
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%; /* 通過邊框半徑實現圓形 */
background-color: #f00; /* 我們設置球的顏色為紅色 */
transform: translateZ(-100px); /* 這里是實現球體效果的關鍵，通過設置 Z 軸的值來實現視覺上的距離 */
}
/* 最后我們可以通過添加一些動畫來增加球的效果 */
div:hover:before {
transform: rotateY(180deg);
}

通過上面的代碼，我們成功地創建了一個可以通過鼠標懸停進行旋轉的三維球體。這種效果可以非常好地應用于各種網站中，例如體育運動、科技、藝術等領域。