CSS3的百分比環形圖是一種非常實用的數據可視化工具，可以用來展示各種數據比例的占比情況，非常直觀易懂。它的制作也非常簡單，只需要使用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”的元素，設置了它的寬高為200px，并將其border-radius屬性設置為50%，使其變成一個圓形。然后使用:before和:after偽類來創建兩個實心圓，分別用來表示整個圓的范圍和當前所占比例的范圍。

使用transform屬性來設置旋轉角度，從而實現環形效果。其中:before元素的旋轉角度為-45度，表示整個圓的范圍，而:after元素的旋轉角度為0度，表示當前所占比例的范圍。同時，我們也將transform的origin屬性設置為center center，使旋轉中心點位于圓心處。

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