你是否在網站或應用程序中看到過餅圖？餅圖在數據可視化中非常常見，它可以以可視化的方式顯示數據的百分比。但是，如果我們將它升級為三維餅圖，是否會更令人印象深刻？CSS 3D可以使我們實現這一目標。

.pie-chart {
position: relative;
width: 200px;
height: 200px;
perspective: 1000px;
}
.pie-chart .slice {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #fff;
transform-origin: 0 0 0;
clip: rect(0, 100px, 200px, 0);
}
.pie-chart .slice1 {
transform: rotateY(0deg) translateZ(100px);
background-color: #df6185;
}
.pie-chart .slice2 {
transform: rotateY(60deg) translateZ(100px);
background-color: #4b4e6d;
}
.pie-chart .slice3 {
transform: rotateY(120deg) translateZ(100px);
background-color: #ffc049;
}
.pie-chart .slice4 {
transform: rotateY(180deg) translateZ(100px);
background-color: #32a9a9;
}
.pie-chart .slice5 {
transform: rotateY(240deg) translateZ(100px);
background-color: #eb5e46;
}
.pie-chart .slice6 {
transform: rotateY(300deg) translateZ(100px);
background-color: #6c5b7b;
}

可以看出，這段代碼塊創建了一個相對定位的元素，并在該元素上應用了透視屬性。此后，我們定義了幾個絕對定位的子元素，每個子元素都代表一個切片，我們在這些子元素上應用了不同的背景顏色和旋轉變換，使它們處于3D環境中，與透視感一致。 如果要創建更多的切片，只需添加更多的子元素，并將旋轉角度和背景顏色更改為與現有元素不同的值即可。 CSS 3D餅圖可以為您的數據可視化帶來新的層次，使您的網站或應用程序更加具有吸引力。試試吧！