Í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

Entradas populares de este blog

¿Qué animal soy en el Horóscopo Chino?

Colores HTML

Animales internos y Animales secretos