Íconos que giran - Efecto CSS

Íconos que giran - Efecto CSSÍconos que giran - Efecto CSS


Con un simple código CSS podemos llamar más la atención de nuestros visitantes asignándole un efecto de giro a los íconos de nuestra página; el efecto se puede usar con los íconos de las redes sociales u otros que destaquen algún tema. El procedimiento es muy sencillo, solo debemos ubicar el estilo que queramos usar y agregar su código en la plantilla (Tema / Editar HTML) arriba de la etiqueta </head>. Luego se usará otro código para la parte donde van las imágenes de los íconos. Primero les comparto los códigos del los Style del efecto, y después el código para las imágenes.

Importante: El procedimiento se puede realizar también en una entrada, lógicamente en modo HTML, pero es importante que nunca se pase a modo Redactar o se perderán las etiquetas <p> </p> del código y serían reemplazadas por etiquetas <div> </div>

Girar 360 grados con regreso.

-----------------------------------------
<style>

p#socialicons img{ /* Primer set de iconos. Gira 360 grados y regresa */
-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);
}

</style>
-----------------------------------------

Girar 70 grados con regreso.

-----------------------------------------
<style>

p#socialicons2 img{ /* Segundo set de iconos. Gira 70 grados y regresa */
-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);
}

</style>
-----------------------------------------

Girar -360 grados sin regreso.

-----------------------------------------
<style>

p#socialicons3 img{ /* Tercer set de iconos. Gira -360 grados y no regresa. Miren que se pasa la parte "transition" de la primera parte abajo */
}

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>
-----------------------------------------

Ahora solo debemos crear un Gadget HTML/Javascript o en una entrada en modo HTML y ubicar el siguiente código, noten que es el mismo para los tres estilos, solo debemos cambiarle la parte del id="socialicons" por el que corresponda. Para el primer estilo sería con: id="socialicons", el segundo estilo sería con : id="socialicons2" y el tercer estilo sería con: id="socialicons3".

-----------------------------------------
<p id="socialicons">
<a href="URL que redirecciona 1"><img title="Título de la página 1" border="0" src="URL del ícono 1 .png" /></a><a href="URL que redirecciona 2"><img title="Título de la página 2" border="0" src="URL del ícono 2 .png" /></a><a href="URL que redirecciona 3"><img title="Título de la página 3" border="0" src="URL del ícono 3 .png" /></a><a href="URL que redirecciona 4"><img title="Título de la página 4" border="0" src="URL del ícono 4 .png" /></a><a href="URL que redirecciona 5"><img title="Título de la página 5" border="0" src="URL del ícono 5 .png" /></a>
</p>
-----------------------------------------

Si quisieramos dejar el efecto sin regreso cuando se quita el puntero del mouse/ratón del ícono en los estilos 1 y 2 como se ve en el estilo 3, tendríamos que pasar el contenido transition de la primera parte del estilo y ubicarlo sobre lo correspondiente a transform de la seguna parte. 

Si quieren que los enlaces se abran en otra pestaña o ventana, agreguen el código target="_blank" a la URL como se muestra en el siguiente TEMA.

Espero que esta información les sea muy útil.

Gracias.
Charkleons.com