CSS是一種用于控制網頁外觀的語言。其中一項功能就是可以通過CSS元素實現轉動的動畫效果，讓頁面變得更加生動有趣。下面我們來學習一下如何實現CSS元素轉動的效果。

.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: rotate 2s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上是一個CSS轉動元素的基本示例。我們通過CSS動畫的關鍵幀來實現這個旋轉效果。其中，@keyframes是關鍵幀的聲明，我們命名為rotate，意為旋轉。在該聲明內部，定義了動畫播放時從0%到100%時的變化規律。

接著，我們在元素.box上應用了animation屬性，它包含了動畫名稱（rotate）、動畫時間（2s）、動畫播放次數（infinite）和動畫播放方式（linear）。這些屬性可以根據實際需求進行修改。

最后，我們將動畫效果作用在.box元素上，通過transform屬性將其旋轉。我們設置0%時的角度為0度，設置100%時的角度為360度。這樣，動畫就實現了從0度到360度的旋轉效果。

總的來說，通過CSS元素轉動可以讓頁面更加生動有趣，吸引用戶的注意力，不過也要避免過度使用，影響頁面的閱讀體驗。