Rotar elementos con CSS3

Hoy aprenderemos a rotar elementos de nuestra pagina utilizando CSS3.

Podemos utilizar cualquier elemento en HTML, en este caso utilizaremos una imagen.

Lo primero que haremos es agregar la imagen.

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

El identificador rueda de la imagen es el usaremos para definir los estilos.

Código de 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>

-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 el balón).

Recuerden dejar sus comentarios.