CSS3的3D特效使得我們可以用CSS來繪制立體圖形，例如一個球體。下面就是如何使用CSS繪制一個立體球的方法。
.ball{
width: 100px;
height: 100px;
border-radius: 50%;
background: #F44336;
position: relative;
transform: rotateX(45deg) rotateY(45deg);
}
.ball:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: #FFCDD2;
transform: translateZ(-50px);
}
.ball:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
background: #EF9A9A;
transform: translateZ(50px);
}首先，我們創建一個
元素并為其指定一個類名“ball”，然后我們定義元素的寬度和高度為100像素，并將邊界半徑設置為50%以創建一個圓形。我們還將背景顏色設置為#F44336。
然后，我們使用: before和: after偽類創建向內和向外的球體表面。我們還需要設置元素的定位為relative以便于絕對定位之后的偽元素。使用rotateX（45deg）rotateY（45deg）在球體上斜著投影的角度。
最后，我們使用transform屬性將球體前表面向內移動50像素（translateZ（-50px））并將球體后表面向外移動50像素（translateZ（50px））。同時，球體的前表面和后表面的背景顏色分別為#FFCDD2和# EF9A9A。
這個過程就完成了，現在你就可以使用CSS來繪制出一個立體感覺強烈的球體。想象一下，如果你在設計一個3D球形網站的時候可能在很多地方用到這個設計到技巧。
下一篇css如何畫進度條