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

5 comentarios:

  1. Excelente! esta nueva plantilla, me parece muy cool!

    ResponderEliminar
  2. Me encantó! el efecto, lo apliqué en mis iconos con forma de corazón y se ven espectaculares.
    Muchas gracias :D me encanta renovar mi guchuna con esos detalles ^_^

    Muchos besos ronroneados en mi abrazo ^_^

    ResponderEliminar
  3. Es muy bonito, muy interesante y muy útil, pero ¿en qué parte se pega esto?

    ResponderEliminar
  4. Eh muchas gracias por compartir estos detalles, me parece que se ven geniales! Los implementaré en la próxima lucha con el html de mis blogs jaja. Saludos

    ResponderEliminar
  5. Me encántan... Veré cuando implementarlos...

    ResponderEliminar