CSS 旋轉圖標是一種常用的 Web 設計技術，可以讓圖標在頁面中產生炫酷的效果。其中，最常見的是 360 度旋轉效果，這種效果不僅簡單易懂，而且實現起來也非常簡單。

.rotate {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上述代碼中，我們通過定義一個 .rotate 類，為圖標添加一個名為 rotate 的動畫，讓它在 1 秒鐘內從 0 度到 360 度不停地旋轉。

接著，我們用 @keyframes 定義了這個 rotate 動畫，指定了動畫的兩個關鍵幀：0% 和 100%。在 0% 時，圖標旋轉角度為 0 度；在 100% 時，圖標旋轉角度為 360 度，完成一次完整的旋轉。

最后，在 HTML 中為圖標添加類名 .rotate，就能夠實現 360 度旋轉效果了。