Iconos sociales con efecto de rotación y zoom. CSS3

Tweet

Como ya amenacé sigo jugando con mi plantilla y he aplicado un efecto de rotación y zoom a los iconos sociales de la sidebar. Cuando pasa el ratón sobre ellos se amplían y rotan 360º, esta realizado con CSS3 y es visible para versiones de navegadores que lo soportan como Chrome, Firefox, Safari y Opera. Para Internet Explorer he hecho algunas pruebas con filter y sus matrices pero empiezo a pensar que eso no lo entiende ni el que las creo, de todas formas si sale algo decente, actualizare esta entrada.

El resultado lo podéis ver en estos iconos:

Solo debéis añadir un elemento HTML e insertar

<STYLE type="text/css">
#follow img:hover {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: rotateThis;
-moz-animation-duration:2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:ease-in-out;
-o-animation-name: rotateThis;
-o-animation-duration:2s;
-o-animation-iteration-count: 1;
-o-animation-timing-function:ease-in-out;
}
@-webkit-keyframes rotateThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
0% { -moz-transform:scale(1) rotate(0deg); }
10% { -moz-transform:scale(1.1) rotate(0deg); }
100% {-moz-transform:scale(1.1) rotate(360deg); }
}
@-o-keyframes rotateThis {
0% { -o-transform:scale(1) rotate(0deg); }
10% { -o-transform:scale(1.1) rotate(0deg); }
100% {-o-transform:scale(1.1) rotate(360deg); }
}
</style>
<div id="follow"><a href="URL 1" target="_blank" title="" rel="nofollow"><img border="0" height="" width="" src="URL ICONO 1/></a> <a href="URL 2" target="_blank" title="" rel="nofollow"><img border="0" height="" width="" src="URL ICONO 2/></a><a href="URL 3" target="_blank" title="" rel="nofollow"><img border="0" height="" width="" src="URL ICONO 3/></a> <a href="URL 4" target="_blank" title="" rel="nofollow"><img border="0" height="" width="" src="URL ICONO 4/></a></div>

Evidentemente para que el efecto quede limpio os recomiendo usar iconos redondos...

Te recomendamos también

+ Artículos relacionados de Tutorial