如何用CSS3实现旋转图标特效

html-css017

如何用CSS3实现旋转图标特效,第1张

<img src="图标.jpg" class='xuanzhuan' />

.xuanzhuan{animation:xz 1s linear infinite }

@keyframes xz{

from  {transform:rotate(0deg)}

to{transform:rotate(360deg)}

}infinite 旋转不限次数，也可以改成1，旋转一次

www.web-tinker.com/article/20003.html

你看这篇文章就会明白为什么不是中心转动。。

还有，下面这个网站，有一种比较直观的做法：

www.dasselundwagner.com/en/

对你的问题倒是没有答案，只是看到你问题，想插句嘴。你注意-webkit前缀，你要用这种方式实现了，你不用webkit内核的浏览器完全没法看。你应该写：

transform:rotate(180deg)

-ms-transform:rotate(180deg)/* IE 9 */

-moz-transform:rotate(180deg)/* Firefox */

-webkit-transform:rotate(180deg)/* Safari and Chrome */

-o-transform:rotate(180deg)/* Opera */

目前情况下，正确的方式在目前是通过js配合css实现，css3距离普及还早着呢。目前主流浏览器对css3和html5的实现方式完全不一样，所以都得单独设置。