CSS3動畫rotate可以通過CSS代碼來實現旋轉動畫效果，非常實用和有趣。下面就給大家介紹一下如何使用rotate來制作旋轉動畫。

.box {
width: 100px;
height: 100px;
background-color: #f00;
transform-origin: center center;
}
.box.animated {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

其中，.box代表需要實現旋轉的元素，可以自行更改為自己需要的元素，.animated則是動畫效果屬性，其中，animation代表動畫屬性，rotate代表旋轉屬性，2s代表旋轉的時間，linear代表旋轉的加速度，infinite代表旋轉次數不限。

同時，在使用rotate屬性時，需要設置transform-origin屬性，該屬性用來設置元素的旋轉點，其中center center代表元素的中心點，可以自行更改為其它的值。

在@keyframes rotate代碼塊中，from表示旋轉的起始狀態，to表示旋轉的結束狀態。使用transform: rotate(0deg)來設置起始狀態的角度為0度，使用transform: rotate(360deg)來設置結束狀態的角度為360度。

通過以上設置，就可以實現旋轉動畫效果了。在實際運用中，我們可以根據需要來調整屬性的值，以達到最佳的動畫效果效果。