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




