CSS動畫旋轉效果是網頁設計中經常使用的效果之一，它可以讓頁面更加生動和有趣。下面是一些常見的CSS動畫旋轉效果的代碼示例。

/* 1. 旋轉動畫 */
.rotate {
-webkit-animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

上述代碼可以讓元素無限旋轉，通過調整動畫持續時間和旋轉角度可以實現不同的效果。

/* 2. 懸停旋轉 */
.hover-rotate:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

上述代碼可以讓鼠標懸停在元素上時出現旋轉效果。

/* 3. 旋轉和放大縮小 */
.scale-rotate {
-webkit-animation: scale-rotate 1s linear infinite;
animation: scale-rotate 1s linear infinite;
}
@-webkit-keyframes scale-rotate {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.2) rotate(180deg); }
100% { -webkit-transform: scale(1) rotate(360deg); }
}
@keyframes scale-rotate {
0% { transform: scale(1); }
50% { transform: scale(1.2) rotate(180deg); }
100% { transform: scale(1) rotate(360deg); }
}

上述代碼可以讓元素同時進行旋轉和放大縮小的動畫效果。

CSS動畫旋轉效果可以通過調整動畫持續時間、旋轉角度、放大縮小比例等參數實現不同的效果和動感。使用這些代碼可以讓網頁更加生動有趣，提高用戶體驗。