在網頁設計中，經常會用到3D球體效果來增強網頁的美觀度，下面我們就來學習一下如何用CSS制作簡單的3D球體。

.ball { 
position: relative; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
margin: 50px auto; 
transform-style: preserve-3d; 
} 
.ball:before, .ball:after { 
position: absolute; 
content: ""; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
background: #ccc; 
transform-style: preserve-3d; 
} 
.ball:before { 
transform: translateZ(-50px); 
} 
.ball:after { 
transform: rotateX(90deg) translateZ(-50px); 
}

首先我們先定義一個球體的父元素，命名為.ball。由于球體是3D的，所以需要設置transform-style屬性為preserve-3d，以保留元素的3D空間關系。接著，在.ball中定義偽元素:before和:after，設置它們的寬高、圓角和背景顏色。其中:before的transform屬性為translateZ(-50px)，將其向Z軸負方向平移50px。而:after則改變了它的transform屬性，設置為先繞X軸旋轉90度，再向Z軸負方向平移50px。

最后附上html代碼如下：

<div class="ball"> </div>

如果想要球體更加立體感，可以通過設置陰影和變換的方式實現，具體方法可以自行嘗試。