掘金个人主页头像旋转效果

<img data-v-fd37d0ac="" data-v-3ce2bd44="" data-v-5ec8ef79="" src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/d1d3c1b115358ea70f51edcd697b58b2~300x300.image" alt="钱端挖掘机师傅的个人资料头像" class="lazy avatar avatar" data-src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/d1d3c1b115358ea70f51edcd697b58b2~300x300.image">

.avatar:hover {
   transform: rotate(666turn);
   transition-delay: 1s;
   transition-property: all;
   transition-duration: 59s;
   transition-timing-function: cubic-bezier(.34,0,.84,1);
}

（1）transform：css3Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
（2）rotate(666turn)：rotate(angle) 定义 2D 旋转，在参数中规定角度。1 turn 相当于1圈，就是360度，90度就是0.25turn。
（3）transition-delay：延迟1s再执行动画
（4）transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
transition-property: all所有属性都将获得过渡效果。
（5）transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
（6）transition-timing-function 属性规定过渡效果的速度曲线。