Forgó közösségi ikonok különböző elfordulással
2013.06.26. 20:52
A kódban mind a három fajta megtalálható, de értelem szerűen kitörlöd azt, amire nincs szükséged.
Demó:
360 fokos elfordulással:
60 fokos elfordulással:
-360 fokos elfordulással:
HTML kód:
<b>360 fokos elfordulással:</b></p>
<p id="socialicons">
<a href="http://www.facebook.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272617_27.png" /></a>
<a href="http://www.twitter.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_34.png" /></a>
<a href="http://www.yahoo.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_05.png" /></a>
</p>
<p><b>60 fokos elfordulással:</b></p>
<p id="socialicons2">
<a href="http://www.facebook.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272617_27.png" /></a>
<a href="http://www.twitter.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_34.png" /></a>
<a href="http://www.yahoo.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_05.png" /></a>
</p>
<p><b>-360 fokos elfordulással:</b></p>
<p id="socialicons3">
<a href="http://www.facebook.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272617_27.png" /></a>
<a href="http://www.twitter.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_34.png" /></a>
<a href="http://www.yahoo.com/">
<img border="0" src="//fuckinway.gportal.hu/portal/fuckinway/image/gallery/1372272618_05.png" /></a>
</p>
CSS kód:
<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>
|