CSS 可以輕易地實(shí)現(xiàn)圖片的旋轉(zhuǎn)，而其中一種比較炫酷的效果是讓圖片以圓心旋轉(zhuǎn)。下面就讓我們來(lái)看一下具體怎么做吧。

.rotate {
width: 200px;
height: 200px;
position: relative;
}
.rotate img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
animation: spin 5s linear infinite;
transform-origin: 50% 50%;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

這里我們創(chuàng)建了一個(gè) .rotate 的容器，使用相對(duì)定位（position: relative;）使內(nèi)部的 img 使用絕對(duì)定位（position: absolute;）。我們給 img 設(shè)置了寬度和高度都為 100%，并設(shè)置了 50% 的圓角，即將圖片變成圓形。

接著，我們定義了一個(gè)名為 spin 的旋轉(zhuǎn)動(dòng)畫(huà)，持續(xù)時(shí)間為 5 秒，采用線(xiàn)性動(dòng)畫(huà)，無(wú)限循環(huán)，作用于 img 標(biāo)簽。transform-origin 屬性用來(lái)設(shè)置旋轉(zhuǎn)的中心點(diǎn)，這里我們?cè)O(shè)置為圖片的正中心（50% 50%）。

最后，我們?cè)?HTML 中使用這個(gè)樣式類(lèi)，將需要旋轉(zhuǎn)的圖像放在 .rotate 容器中即可。

<div class="rotate">
<img src="rotate-image.png" alt="Rotate Image">
</div>

這樣做就可以實(shí)現(xiàn)一個(gè)帶有圓心旋轉(zhuǎn)效果的圖片了。需要注意的是，這種效果對(duì)性能消耗比較大，如果需要一次旋轉(zhuǎn)多個(gè)圖片，需要考慮一些優(yōu)化手段來(lái)減少性能的消耗。