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.