17

10

Rotar imágenes y elementos

CSS3 nos da muchas efectos para añadir en nuestra web, gracias a la propiedad transition, que rivalizan con lo que Flash puede hacer.
A esta propiedad se le pueden añadir varios parámetros y en este caso usaremos el rotate() para girar imágenes y cualquier elemento.
Hace un tiempo creé unos ejemplos de animaciones con puntos (•) que usaba esta propiedad y otro que simulaba movimientos "naturales".
Además del ejemplo de abajo podemos tomar como ejemplo la barra lateral derecha, que esta ligeramente inclinada.

Usar transform

En esta propiedad se pueden añadir varias transformaciones, es decir, dentro de la propiedad podemos añadir la propiedad rotate() y todas las demás que nos hagan falta.
Nota: también se puede usar la propiedad rotation, donde establecemos en su interior el número de grados.

1. transfotm: rotate(90deg);
2. rotation: 90deg;

Este es el método de uso de transform, dentro establecemos la función de rotar con los grados en el interior del paréntesis, y debemos de usar la unidad "deg" que representa los grados.
Para usar los grados tenemos que tener en cuenta que 0º y 360º es el estado normal, y se puede añadir cualquier valor, en el caso de superar 360º o ser inferior a 0º funcionará igualmente, rotando "varias veces".

Rotaciones básicas

En el primer ejemplo hemos podido ver que se puede tomar cualquier grado de rotación, pero podemos llamar "básicos" a los que podrían servir para rotar una imagen por ejemplo sin que varie la rectitud de la misma.

1. rotation: 0deg;
2. rotation: 90deg;
3. rotation: 180deg;
4. rotation: 270deg;

Unir transiciones y rotaciones

Esta es una propiedad que funciona a la perfección con transition, lo que hace que podamos rotar un elemento progresivamente al pasar por encima, por ejemplo.

1. /* Este es el contenido necesario para hacer este efecto (sin tener en cuenta la decoración) */
   
2. .ejemplo {

rotation: -120deg;

transition: all 1s ease;

3. }
5. .ejemplo:hover {

rotation: 120deg;

6. }