Voltear una imagen con CSS

0 - , - 08/08/2010 08:52:46

Voltear una imagen en vez de cargar una nueva imagen puede ser de utilidad en algunos casos. Por ejemplo, pongamos que tenemos una imagen de una flecha y a veces necesitamos que apunte a la derecha y otras a la izquierda. En vez de generar dos imágenes, podemos utilizar una -de esta manera optimizar un poco más nuestra web- y utilizar el siguiente código:

img.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

Visto en "25 Incredibly Useful CSS Snippets for Developers" » »

Si quisieramos volter la imagen de forma vertical, el código sería el siguiente:

img.flip_vertical {
	-moz-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
	filter: FlipV;
	-ms-filter: "FlipV";
}

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha