Efecto de rotación y zoom a los iconos sociales que 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.

DEMO


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...
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también