CSS是網(wǎng)頁設(shè)計中不可或缺的一部分，它可以讓網(wǎng)頁看起來更加美觀。在CSS中，我們可以使用transform屬性來進(jìn)行旋轉(zhuǎn)操作，下面我們來學(xué)習(xí)如何用CSS實(shí)現(xiàn)一個漂亮的旋轉(zhuǎn)小球效果。

.ball{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
animation: rotate 2s infinite linear;
}
@keyframes rotate{
from{
transform: rotateY(0deg) rotateX(0deg);
}
to{
transform: rotateY(360deg) rotateX(360deg);
}
}

上面的代碼中，我們定義了一個.ball類來設(shè)置旋轉(zhuǎn)小球的樣式。首先，我們設(shè)置寬高為100px，邊框半徑為50%，即得到了一個圓形；背景顏色為藍(lán)色。之后，我們定義了一個動畫效果，使用了CSS3新特性——@keyframes。在from狀態(tài)下，即初始狀態(tài)下，我們使用rotateY(0deg) rotateX(0deg)來設(shè)置小球不旋轉(zhuǎn)；在to狀態(tài)下，即結(jié)束狀態(tài)下，我們使用rotateY(360deg) rotateX(360deg)來設(shè)置小球進(jìn)行360度的旋轉(zhuǎn)操作。最后，我們給動畫設(shè)置了一個2秒的持續(xù)時間，無限循環(huán)執(zhí)行，并設(shè)置了線性運(yùn)動。

通過這樣的代碼設(shè)置，我們即可讓小球在網(wǎng)頁中做一個漂亮的旋轉(zhuǎn)效果。