Hoy aprenderemos a rotar un elemento de nuestra página, utilizando solo CSS3.

Podemos utilizar cualquier elemento HTML, para este ejemplo usaré la imagen de una rueda:

Lo primero que necesitamos es crear nuestra imagen:

<img id="rueda" src="rueda.png" />                            

El identificador id="rueda", es el que usaremos a continuación para definir los estilos:

<style type="text/css">
    #rueda {
        transition: 2.5s ease;
        -moz-transition: 2.5s ease; /* Firefox */
        -webkit-transition: 2.5s ease; /* Chrome - Safari */
        -o-transition: 2.5s ease; /* Opera */
    }
    
    #rueda:hover {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg); /* Firefox */
        -webkit-transform: rotate(360deg); /* Chrome - Safari */
        -o-transform: rotate(360deg); /* Opera */
    }
</style>

#rueda
-moz-, -webkit- y -o-, son prefijos utilizados para que el estilo sea reconocido en cada navegador.
2.5s, los segundos que durará la rotación(puedes modificarlo a gusto).
ease, el tipo de rotación, si miras con detenimiento notarás que la animación al rotar empieza lentamente, aumenta de velocidad y termina lentamente (el valor ease viene por defecto, así que puedes no colocarlo si lo deseas).

#rueda:hover
hover, para que se active la animación cuando el puntero del mouse pase por encima de la imagen.
Los prefijos -moz-, -webkit- y -o- indican que el estilo se aplica a un navegador determinado, igual que en el estilo anterior.
rotate(360deg), rotate indica que rotarás la imagen en 360 grados (puedes modificar este valor y probar una media rotación por ejemplo: 180) y deg indica que se está usando degrees o grados sexagesimales.

Aquí el ejemplo funcionando (para ver el efecto, pasa el puntero del mouse sobre la rueda):

Explicación:

Cuando el puntero del mouse está sobre nuestra imagen se aplica el estilo #rueda:hover, asi que rota 360 grados, y lo hace durante 2.5 segundos como definimos en #rueda. Al quitar el mouse de la imagen, vuelve a su estado original.