CSS是前端開發(fā)中不可或缺的一部分，它可以實現(xiàn)各種華麗的效果。在這篇文章中，我們會學(xué)習(xí)如何用CSS寫出一個3D球。

.ball {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffa500; /* 橙色 */
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
.ball:before, .ball:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background-color: inherit;
transform: rotateY(90deg);
}
.ball:before {
transform: rotateY(-90deg);
}
.ball:after {
transform: rotateX(90deg);
}
@keyframes spin {
to {
transform: rotateY(360deg);
}
}

首先，我們用border-radius將div圓形化。接著，我們使用perspective屬性將立體感引入，同時使用transform-style: preserve-3d將球放在3D坐標系中。

接下來，在球的:before和:after偽元素中，我們用transform: rotateY（90deg）和transform: rotateX（90deg）將球沿著不同軸旋轉(zhuǎn)90度，使其最終呈現(xiàn)為一個完整的3D球。

最后，我們使用動畫將球不斷旋轉(zhuǎn)，形成不間斷的動態(tài)效果。這里通過關(guān)鍵幀動畫@keyframes來控制旋轉(zhuǎn)的效果。至此，一個3D球就完成了。