COMO HACER ROTAR UN OBJETO EN CSS3

¿COMO HACER ROTAR UN OBJETO EN CSS3?







PROGRAMACION DE COMPUTADORES






LAURA BEDOYA SALZAR







UNIVERSIDAD DE MANIZALES
COLEGIO SAN JORGE

MANIZALES, 26 DE MAYO 2015
COMO HACERROTAR UNA IMAGEN EN CSS3
Lo primero que necesitamos es crear nuestra imagen:


El identificador id=”rueda”, lo usare a continuación para definir losestilos.
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 */
}


#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 (puedesmodificarlo 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 vienepor 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 modificareste valor y probar una media rotación por ejemplo: 180) y deg indica que se está usando degrees o grados sexagesimales.





EXPLICACIÓN

Cuando el puntero del mouse está sobre la imagense 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.