Rotar elementos con transform y efectos con transition y CSS3

Ahora con CSS3 podemos fácilmente rotar elementos, tanto imágenes, divs o cualquier otro, tarea que antes resultaba un poco pesada ya que se tenia que recurrir a javascript u otras artimañas. Ahora con CSS3 únicamente tenemos que incluir una linea de código en nuestros estilos:

#midiv{transform: rotate(60deg)}

Aplicamos una rotación de 60 grados al elemento con id midiv.

Como los distintos navegadores no han acabado de soportar CSS3 en todas sus características y cada uno lo hace a su manera, para que el efecto de rotación sea visible en todos aquellos que soporten CSS3 deberemos incluir la especificación para cada uno:

#midiv{
     transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg)
}

El efecto de rotación puede ser combinado con el efecto transform de CSS3. Su sintaxis es la siguiente:

transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo]

Por lo que aplicado a nuestro ejemplo:

transition:all 0.8s ease-in;

Un ejemplo completo de los dos efectos convinados sería:

#midiv{
    width: 150px;
    height:150px;
    background:#ccc;
    transition:all 0.8s ease-in;
    -webkit-transition:all 0.8s ease-in;
    -moz-transition:all 0.8s ease-in;
    -o-transition:all 0.8s ease-in;
}
#midiv:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

Pasa el ratón por encima del cuadro gris para ver como rota con el efecto transition: