CSS3的旋轉(zhuǎn)效果讓頁面展示更加生動有趣，其中旋轉(zhuǎn)圓圈效果是一種比較常見的效果。在css中我們可以使用transform來實(shí)現(xiàn)旋轉(zhuǎn)圓圈的效果。

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

上述代碼中，我們首先創(chuàng)建了一個名為circle的class，它代表了一個寬高為100像素、背景顏色為紅色的圓圈。然后我們在該class中使用了動畫效果，即circle-rotate。

這是一個無限循環(huán)的線性動畫，運(yùn)行時間為2秒。具體動畫樣式是從0度開始旋轉(zhuǎn)，一直旋轉(zhuǎn)到360度。在樣式中，我們使用了-webkit-前綴，以確保Webkit內(nèi)核的瀏覽器（如Chrome和Safari）可以正確地渲染動畫。

最后，我們需要在html文件中加入該class，即可讓這個圓圈動起來了！

<div class="circle"></div>