Giro de 360º con CSS3

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

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.