上图这个让图片在指定时间内 旋转、变形的常用语各种网站的头像或者图标上，特别是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