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.

La propiedad transform

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.

Un ejemplo de código para un realizar un giro 360º con CSS3

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;
}

div.girar:hover{
	transform:rotate(360deg);
}

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.

Podremos conocer más sobre la propiedad transform y su compatibilidad con las diversas versiones de los navegadores consultando la documentación de MDN.