餅狀3D統(tǒng)計(jì)圖是數(shù)據(jù)可視化中常見的一種圖表類型，它以餅狀圖為基礎(chǔ)，通過增加立體感來(lái)提升視覺效果。在CSS中實(shí)現(xiàn)餅狀3D統(tǒng)計(jì)圖需要用到一些技巧。

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

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

.pie-chart__slice表示每個(gè)數(shù)據(jù)塊的樣式，它們是絕對(duì)定位的，并通過transform-origin屬性設(shè)置了旋轉(zhuǎn)中心為左側(cè)。其中的box-shadow屬性可以實(shí)現(xiàn)漸變的餅狀填充效果。最后，@keyframes定義了旋轉(zhuǎn)動(dòng)畫的效果。

當(dāng)數(shù)據(jù)量較大時(shí)，我們可以通過JavaScript動(dòng)態(tài)生成餅圖的數(shù)據(jù)塊，并通過CSS設(shè)置它們的樣式。這種方法可以很好地兼容不同的數(shù)據(jù)量和數(shù)值。