Rotación de imagenes con css

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.

  • grooosooo. me vino bárbaro el dato.

  • Elend

    No sabia que con CSS se podia hacer eso…gracias por el post

  • cary

    No me funcionó en InternerExplorer

  • I’m sorry man … esa vaina no funciona con Interner Explorer y lo testee con la version 10 del mismo.

  • david

    explorer es una mierda, pocos lo usan

  • como se hace,alguien por favor me podria explica como hago paso a paso, disculpen mi ignorancia.saludos