Hasta la llegada de CSS3 la posibilidad de girar elementos era algo compleja y, por lo general, debíamos recurrir a JavaScript. Al dar clases de diseño Web, los alumnos me suelen preguntar si no hay una manera más moderna de resolver esta necesidad y la respuesta viene dada por una propiedad incorporada en CSS3.
Ahora, mediante la propiedad transform
podremos establecer giros de la cantidad de grados que deseemos.
Lo que debemos tener en cuenta que este tipo de transformación no implica que sea necesaria una animación, ya que podremos encontrar casos en los cuales necesitaremos que el elemento esté girado de manera predeterminada. No obstante esto, en este caso veremos como trabajar con una animación.
En el ejemplo que veremos a continuación trabajaremos sobre un elemento div
que tendrá la clase girar
y cuando pasemos por encima con el mouse hará un giro de 360º en un tiempo de 3 segundos:
div.girar { width:250px; height:250px; background-color: blue; transition: 3s; -moz-transition: 3s; -webkit-transition: 3s; -o-transition: 3s; /* Código by @damiande */ } div.girar:hover { transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); /* Código by @damiande */ }
Como vemos, rotate
recibe los grados que deseamos rotar y al pasar con el mouse se activarán las reglas para el :hover
de la clase girar
.
También podemos ver que en el origen se agregó la propiedad transition
, con sus respectivos modificadores para compatibilidad. Esta opción nos permitirá ver una animación más suave en los navegadores compatibles. Establecimos un tiempo de 3 segundos para que el giro sea lento, pero si bajamos este tiempo, todo ocurrirá más rápido.
Más sobre Diseño y desarrollo Web
Hola
Muy interesante.
Funciona en Mozila, Safari, Chrome y Opera.
¿Que hay de Internet Explorer y Netscape Navigator?
Saludos
Las transformaciones de CSS3 2D y 3D funcionan en IE10 (las de 3D en modo parcial). Netscape no tiene nuevas versiones desde hace años y no es compatible con estas características.
Saludos
excelente! muchas gracias! una pregunta para hacer que siempre este girando sin pasar el mouse? osea en un bucle infinito?
Sí, eso se puede lograr utilizando las animaciones de CSS3: http://www.w3.org/TR/css3-animations/