CSS旋轉(zhuǎn)動(dòng)畫是一種非常有趣的效果，可以讓元素沿著一個(gè)軸線或點(diǎn)進(jìn)行旋轉(zhuǎn)。我們可以使用CSS的transform屬性來實(shí)現(xiàn)這個(gè)效果。下面是一個(gè)簡(jiǎn)單的例子，可以使一個(gè)div元素沿著中心點(diǎn)旋轉(zhuǎn)360度：

div {
width: 100px;
height: 100px;
background-color: red;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

在這個(gè)例子中，我們首先定義一個(gè)div元素，并為它定義了一個(gè)紅色的背景色。然后我們定義了一個(gè)名為spin的動(dòng)畫，將其應(yīng)用于該div元素。動(dòng)畫在2秒內(nèi)完成，具有線性的時(shí)間函數(shù)，并且無限循環(huán)。我們也定義了一個(gè)關(guān)鍵字spin，其中from和to選項(xiàng)告訴瀏覽器動(dòng)畫應(yīng)該從哪里開始，到哪里結(jié)束。

如果我們想在某個(gè)時(shí)刻暫停旋轉(zhuǎn)動(dòng)畫，可以使用animation-play-state屬性。例如，我們可以為一個(gè)按鈕添加一個(gè)事件監(jiān)聽器，在單擊按鈕時(shí)暫停旋轉(zhuǎn)動(dòng)畫：

暫停動(dòng)畫div {
width: 100px;
height: 100px;
background-color: red;
animation: spin 2s linear infinite;
animation-play-state: running;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
function pauseAnimation() {
var elem = document.querySelector("div");
elem.style.animationPlayState = "paused";
}

在這個(gè)例子中，我們?yōu)閐iv元素添加了一個(gè)animation-play-state屬性，并將其設(shè)置為running。這表示動(dòng)畫正在運(yùn)行。當(dāng)我們單擊按鈕時(shí)，我們將通過JavaScript獲取div元素，并將其animation-play-state屬性設(shè)置為paused，從而暫停旋轉(zhuǎn)動(dòng)畫。

CSS旋轉(zhuǎn)動(dòng)畫是非常靈活的，因?yàn)槲覀兛梢允褂胻ransform屬性來定義任意的旋轉(zhuǎn)路徑。通過組合使用不同的變換函數(shù)，我們可以讓元素繞著任何一個(gè)點(diǎn)或軸線進(jìn)行旋轉(zhuǎn)。當(dāng)然，我們還可以使用animation-direction屬性來控制旋轉(zhuǎn)的方向和循環(huán)模式等設(shè)置。