☰

Rotar imágenes y elementos solo con CSS

Sabías que se pueden rotar imagenes (y cualquier elemento HTML) utilizando solo CSS? Añade estas clases CSS a tus elementos HTML para rotarlos en pasos de 90 grados.

.rot0 {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  rotation: 0deg;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.rot90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  rotation: 90deg;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.rot180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  rotation: 180deg;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rot270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

También puedes establecer el origen de la rotación para Firefox y Safari utilizando lo siguiente:

.rotate-me {
       -moz-transform-origin: 0 0;
       -webkit-transform-origin: 0 0;
}

La rotación para Internet Explorer funciona un podo distinto y por lo tanto no hay origen de la rotación. El elemento es simplemente rotado y alineado por su nueva dimensión, en el flujo de la página.

Debajo puedes ver una prueba de rotación de una imagen poniendo los separadores de navegación en la izquierda de la página. Estoy seugor que hay muchas más alicaciones que pueden ser de utilidade, por ejempo: rotar el texto de una feche en un artículo.

Rotación de imagenes con css

Este es un ejemplo que funciona con navegadores basados en gecko como Safari o Safari Mobile en el iPhone, Firefox 3.5 e Internet Explorer 5.5 y superiores.