CSS3中提供了很多非常實用的動畫效果，比如圖片的從中心旋轉。通過制作一個簡單的CSS動畫，可以輕松地讓圖片從中心旋轉。

.rotate{
-webkit-animation:rotate 2s linear infinite;
animation:rotate 2s linear infinite;
}
@-webkit-keyframes rotate{
from{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes rotate{
from{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}

上面這段CSS代碼中的.rotate類定義了一個動畫，這個動畫名為rotate，持續時間為2秒，線性無限循環。

然后我們定義了兩個@keyframes，分別對應webkit和標準瀏覽器。from和to分別對應動畫的開始和結束狀態，其中-webkit-transform:rotate和transform:rotate分別是CSS3的變換屬性，用來實現旋轉效果。

接下來，在需要使用這個動畫的圖片標簽中添加rotate類即可：

這樣圖片就會從中心旋轉起來了。