CSS是網頁設計中不可或缺的一部分，它可以讓網頁更加生動、有趣。其中，CSS中的動畫效果更是給網頁帶來了很大的變化。在眾多的動畫效果中，轉動動畫是比較常見的一種，接下來我將介紹如何實現CSS轉動動畫。

/* CSS樣式代碼 */
.box{
width: 100px;
height: 100px;
background-color: #f00;
/* 動畫屬性 */
animation: rotate 2s infinite linear;
}
/* 關鍵幀動畫代碼 */
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

首先，我們需要一個容器來放置需要設置動畫效果的元素，這里我們創建了一個class為box的元素。在.box中，我們需要設置元素的寬、高、背景顏色等基本屬性。接下來，就是動畫的核心，我們通過設置animation屬性來實現轉動動畫。其中，rotate表示動畫名稱，2s表示動畫時長，infinite表示動畫循環播放，linear表示動畫速度。這里的rotate名稱需要與后面的關鍵幀動畫名稱對應。

關鍵幀動畫指的是在動畫過程中需要改變的屬性及其取值情況，它通過在特定的時間點進行設定，從而實現動畫的過渡效果。在上面的代碼中，我們通過@keyframes來定義rotate名稱的關鍵幀動畫代碼。其中，0%表示動畫開始時的狀態，這里設置transform屬性的 rotate() 方法的取值為0deg，也就是指的是在原地不動。而100%則表示動畫結束時的狀態，這里我們通過rotate()方法的取值為360deg，實現了一個360度的轉動效果。

通過上述代碼，我們就可以實現一個簡單的CSS轉動動畫效果。同時，我們也可以通過設置多個關鍵幀動畫代碼，配合不同的動畫屬性，實現更加豐富的動畫效果。