转载：掘金头像的旋转（transform）

css 实现掘金个人主页的旋转头像

#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)

参数的说明：

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;
}