掘金头像的旋转（transform）

进入个人博客 Eighteen Blog

在浏览掘金个人主页的时候鼠标放在了头像上发现了头像竟然旋转的越来越快，想用js的setInterval实现一下这个旋转，但是发现效果不好，最后发现掘金的实现方式只用了css3。

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

首先给任意的元素加上这些css就可以进行旋转了。
查看了一下这些属性的意思，下面介绍一下

transform	transition-delay	transition-property	transition-duration	transition-timing-function
rotate(666trun)	1s	all	59s	cubic-bezier(0.34,0,0.84,1)

以上是该效果所用到的css属性。

1. transform: rotate(666turn); 常见的用来旋转元素角度的css，这里用到的是turn，1turn = 360°
2. transition-property: all; 这个属性是指明效果变换的位置，比如width，height等，all是所有属性。
3. transition-duration: 59s; 过渡效果的持续时间。
4. transition-timing-function: cubic-bezier(.34,0,.84,1); 过渡效果的速度曲线 四个值的范围都是0-1 代表整个过程。
5. transition-delay：1s; 这个属性的作用就是效果执行前的等待时间
6. 后四个属性可以简写为transition: all 59s cubic-bezier(.34,0,.84,1) 1s; 顺序为transition-property，transition-duration，transition-timing-function 和 transition-delay

最后简写样式：

#pic:hover {
            transform: rotate(666turn);
            transition: all 59s cubic-bezier(.34,0,.84,1) 1s;
        }