Í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 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 sobre la etiqueta </head> de nuestra plantilla (Plantilla / Editar HTML), y luego en un gadget HTML/Javascript ubicar las imágenes de los íconos.

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 y en él 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. 

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>

Si quieren que los enlaces se abran en otra pestaña o ventana, visiten la siguiente ENTRADA para que conozcan la forma de hacerlo directamente desde la plantilla, o agregándole un código target="_blank" a cada enlace.

Autor original: Dynamic Drive

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

Gracias.



Cómo hacer girar los íconos en blogger, efecto de giro en blogger, códigos para girar imágenes en blogger, hacer girar las redes sociales,