CSS3 let the picture rotate degrees, 60 degrees, degrees, and so on, you can extrapolate, the following by the number of degrees of sample code, like friends can refer to the following
Because I can't show it, I just cut a picture.
Here is the implementation code:
Copy Code code as follows:
<style>
p#socialicons img{/* 1st set of icons. Rotate them deg 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
-webkit-transform:rotate
-o-transform:rotate
-ms-transform:rotate
transform:rotate
}
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-deg 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
-webkit-transform:rotate
-o-transform:rotate
-ms-transform:rotate
transform:rotate
}
</style>
<b>rotation onmouseover and 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 rotation 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>-degree rotation 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>
