餅狀3D統計圖是數據可視化中常見的一種圖表類型，它以餅狀圖為基礎，通過增加立體感來提升視覺效果。在CSS中實現餅狀3D統計圖需要用到一些技巧。

/* 基礎樣式 */
.pie-chart {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #f5f5f5;
transform-style: preserve-3d; /* 開啟3D效果 */
transform: rotateX(45deg); /* 繞X軸旋轉45度 */
}
/* 空心部分樣式 */
.pie-chart::before {
content: "";
position: absolute;
top: 20%;
left: 20%;
z-index: 1;
width: 60%;
height: 60%;
border-radius: 50%;
background: #fff;
}
/* 數據塊樣式 */
.pie-chart__slice {
position: absolute;
width: 50%;
height: 100%;
border-radius: 50%;
transform-origin: left; /* 以左側為旋轉中心 */
box-shadow: inset 8px 0 0 #00a8e6;
animation: spin 2s infinite linear;
}
/* 餅狀圖旋轉動畫 */
@keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}

上述代碼中，.pie-chart定義了整個餅狀圖的樣式，包括寬高、邊框半徑和背景顏色等。其偽元素::before則用于顯示餅圖的空心部分。

.pie-chart__slice表示每個數據塊的樣式，它們是絕對定位的，并通過transform-origin屬性設置了旋轉中心為左側。其中的box-shadow屬性可以實現漸變的餅狀填充效果。最后，@keyframes定義了旋轉動畫的效果。

當數據量較大時，我們可以通過JavaScript動態生成餅圖的數據塊，并通過CSS設置它們的樣式。這種方法可以很好地兼容不同的數據量和數值。