Rotación en CSS3

Las transformaciones en CSS3 es una de las propiedades más estéticas que maneja esta tecnología, el código que se emplea es el siguiente:

transform: función(parametros);

Las función varea de acuerdo a lo que se pretende, en este caso, emplearemos "rotate" para girar nuestros elementos o cajas, el siguiente codigo que se muestra a continuación, nos enseña la función rotate. Donde se emplea el parámetro "deg" que nos permitirá rotar nuestros contenidos o div de 0 a 360 grados.

transform: rotate(100deg);

Recordemos que CSS3 no es compatible en diferentes navegadores como lo es Internet Explorer, y debemos agregar más código a nuestra hoja de estilos :

-moz-transform: rotate(parámetros); // Mozilla
-webkit-transform: rotate(parámetros); // Safari y Chrome
-o-transform: rotate(parámetros); // en Opera

Para practicar esta transformacion de rotacion, agregamos los siguientes tags

<ul>
<li id="rotar">
<a href="#"><center>ROTAR</center></a>
</li>
</ul>

El estilo CSS3 que hara girar a nuestro enlace es,

#rotar{
padding-top:25px;
padding-bottom: 25px;
margin: 100px;
box-shadow:1px 1px 20px #FFF;
-moz-box-shadow:10px 10px 10px #FFF;
-webkit-box-shadow:10px 10px 10px #FFF;
width:100px;
background:#CF6;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transition-duration:1s;//Velocidad de giro
-o-transition-duration:1s;
-moz-transition-duration:1s;
transition-duration:1s;
}
#rotar:hover{
transform:scale(1.5,1.5);
box-shadow:1px 1px 20px #FFF;
-moz-box-shadow:10px 10px 10px #FFF;
-webkit-box-shadow:10px 10px 10px #FFF;
width:100px;
background:#CF6;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
ul, ol, a{
text-decoration: none;
list-style: none;
}

Para poder trabajar de forma perfecta con rotate, necesitamos de la propiedad duration-transition (duración de la transición), para que se mueva nuestro tag de manera lenta, en este caso se definió de un segundo. Las condiciones iniciales son de 10 grados y al ingresar el apuntador gira hasta 360 grados o el valor que queramos utilizar. También podemos notar que el padre de nuestro enlace, el tag li #rotar cambia de color al dar el giro. Para saber más acerca de la duración de transición visite el siguiente enlace:  Transition en css3 menu

• ROTAR