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.
