今天小编跟大家讲解下有关CSS3图片旋转特效(360/60/-360度) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3图片旋转特效(360/60/-360度) 的相关资料，希望小伙伴们看了有所帮助。
由于没法展示效果只是截了个图下面是实现代码： 复制代码代码如下: <style> p#socialicons img{ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } p#socialicons img:hover{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } p#socialicons2 img{ -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } p#socialicons2 img:hover{ -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); } p#socialicons3 img{ } p#socialicons3 img:hover{ -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } </style> <b>360度旋转 onmouseover和onmouseout</b></p> <p id="socialicons"> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"_fcksavedurl=""http://www.zzsck.org/wp-content/uploads/2013/10/rss.png""/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png"/></a> </p> <p><b>60度旋转 onMouseover and onMouseout</b></p> <p id="socialicons2"> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png"/></a> </p> <p><b>-360度旋转 onMouseover</b></p> <p id="socialicons3"> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png"/></a> <a href=""> <img border="0"src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png"/></a> </p>来源：爱蒂网
