纯css代码实现图片旋转360度

纯css代码实现图片旋转360度,网页前端(UE)必须要对前端技术时刻保持关注,这样才能将最好的技术运用到项目中去,而p2h.cn一直保持了这个秉性。最近在观察一个酷站的时候发现,有个网站的图片移上去便能够旋转360度。出于职业的原因,立马用了前端必用的一款 firebug进行了观察,然后发现了这么一个极品,少见,效果绚丽,不兼容的属性 —- -moz-transform.

这个是火狐浏览器的私有属性,所以要用火狐浏览器才看得到哦。

 img {
    float: left;
    height: 80px;
    margin-right: 10px;
    width: 80px;
}
img:hover {
    -moz-transform: rotate(360deg);
    -moz-transition: all 1s ease-out 0s;
}
上面代码经过了改良,加入以上代码到网站css文件的任意一个地方,试试吧