CSS是前端開(kāi)發(fā)中不可或缺的一部分，它可以實(shí)現(xiàn)各種華麗的效果。在這篇文章中，我們會(huì)學(xué)習(xí)如何用CSS寫(xiě)出一個(gè)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屬性將立體感引入，同時(shí)使用transform-style: preserve-3d將球放在3D坐標(biāo)系中。

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

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