上圖這個讓圖片在指定時間內 旋轉、變形的常用語各種網站的頭像或者圖標上，特別是zblogPHP模板里很多開發者喜歡用，所以今天來分享下：

先看完整代碼，然后再逐一說明：

.commentlist img{width:40px;height:40px;position:relative;float:left;margin:4px 16px 0 0;padding:2px;border:1px solid #ddd;background:#fff;-webkit-transition:.8s;-moz-transition:.8s;-o-transition:.8s;-ms-transition:.8s}
.commentlist img:hover{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:23px}

width:40px;height:40px; 高度與寬度

position:relative;相對定位

float:left; 居左

margin:4px 16px 0 0; 上下左右外間距

padding:2px; 圖片與border之間的內間距

重點：-webkit-transition:.8s;-moz-transition:.8s;-o-transition:.8s;-ms-transition:.8s  —— 0.8秒內動畫

重點：transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);  —— 旋轉720度

重點：border-radius:23px 變形為圓角23px