如何使用css3动画实现旋转效果

为了使用旋转动画，你必须定义css动画帧（animation keyframes）

阅读 https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations 获取更多的资料

一旦配置好动画的时序，还需要设置动画如何显示。这是通过使用两个或两个以上的@keyframes 关键字。每一个keyframe（关键帧）描述动画元素在动画序列给定的时间中如何显示。

案例代码：http://jsfiddle.net/gaby/9Ryvs/7/

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}