设计主页 > 网站制作 > CSS教程 >

CSS3图片旋转特效(360/60/-360度)

设计前沿收集 / 佚名 时间:2013-10-15 09:00

CSS3让图片旋转360度、60度、-360度等,大家可以举一反三,下面由这几个度数的示例代码,喜欢的朋友可以参考下

 

由于没法展示效果只是截了个图
 
下面是实现代码:

复制代码
代码如下:

<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-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{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-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{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
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.wzsky.net/img2013/uploadimg/20131015/0923551.png" _fcksavedurl=""/img2013/uploadimg/20131015/0923551.png"" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923552.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923553.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923554.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923555.png" /></a>
</p>
<p><b>60度旋转 onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923551.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923552.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923553.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923554.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923555.png" /></a>
</p>
<p><b>-360度旋转 onMouseover</b></p>
<p id="socialicons3">
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923551.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923552.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923553.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923554.png" /></a>
<a href="#">
<img border="0" src="http://www.wzsky.net/img2013/uploadimg/20131015/0923555.png" /></a>
</p>