CSS3的百分比環(huán)形圖是一種非常實(shí)用的數(shù)據(jù)可視化工具，可以用來展示各種數(shù)據(jù)比例的占比情況，非常直觀易懂。它的制作也非常簡單，只需要使用CSS的transform和transition屬性就可以了。

/* CSS代碼 */
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e1e1e1;
}
.circle:before,
.circle:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-color: #ff6600;
transform-origin: center center;
transition: all 1s;
}
.circle:before {
z-index: 1;
width: 100%;
height: 100%;
transform: rotate(-45deg);
}
.circle:after {
z-index: 2;
width: 80%;
height: 80%;
transform: rotate(0deg);
}

上面的代碼中，我們首先定義了一個類名為“circle”的元素，設(shè)置了它的寬高為200px，并將其border-radius屬性設(shè)置為50%，使其變成一個圓形。然后使用:before和:after偽類來創(chuàng)建兩個實(shí)心圓，分別用來表示整個圓的范圍和當(dāng)前所占比例的范圍。

使用transform屬性來設(shè)置旋轉(zhuǎn)角度，從而實(shí)現(xiàn)環(huán)形效果。其中:before元素的旋轉(zhuǎn)角度為-45度，表示整個圓的范圍，而:after元素的旋轉(zhuǎn)角度為0度，表示當(dāng)前所占比例的范圍。同時，我們也將transform的origin屬性設(shè)置為center center，使旋轉(zhuǎn)中心點(diǎn)位于圓心處。

最后，我們再使用transition屬性為元素添加過渡動畫效果，讓其變化更加平滑自然。這樣，我們就完成了一個簡單的百分比環(huán)形圖的制作。