¿Forma de navegador cruzado para voltear html/imagen a través de Javascript/CSS?

Question

¿Hay una biblioteca/forma simple de voltear una imagen?

Voltear una imagen como esta:

AABBCC  CCBBAA 
AABBCC -> CCBBAA 

no estoy mirando para animaciones, simplemente voltear la imagen.

He buscado en Google no avial y solo encontré una versión compleja que utilizaba SVG en MozillaZine y no estoy seguro de que funcione en todos los navegadores.

Answer 1

El siguiente CSS funcionará en IE y navegadores modernos que admiten transformaciones CSS. Incluí una clase flip vertical en caso de que también quieras usarla.

.flip-horizontal { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    transform: scaleX(-1); 
    -ms-filter: fliph; /*IE*/ 
    filter: fliph; 
} 
.flip-vertical { 
    -moz-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    transform: scaleY(-1); 
    -ms-filter: flipv; /*IE*/ 
    filter: flipv; 
} 

Answer 2

Tome un vistazo a una de las muchas bibliotecas de tipos reflection.js, ellos son bastante simples. En IE tomarán y usarán el filtro 'flipv', también hay un filtro 'fliph'. Dentro de otros navegadores, creará una etiqueta canvas y usará drawImage. Aunque la respuesta de Elijah probablemente sea compatible con los mismos navegadores.

Answer 3

Si solo desea voltear una imagen de fondo, puede usar la clase en los elementos internos dentro de un div invertido. Básicamente, estás volteando los elementos internos con el div principal, pero volteándolos hacia atrás. Funciona en Firefox de todos modos.

De esta manera:

<div id="container" class="flip-horizontal"> <!-- container would have your background image --> 
<h3 class="flip-horizontal">Hello There!</h3> 
<p class="flip-horizontal">Here is some text</p> 
</div> 

Answer 4

Sólo desenterrado esta respuesta al tratar de corregir un error, mientras que la respuesta sugerida es correcta He encontrado que rompe las reglas CSS de pelusa más modernos en cuanto a la inclusión de todas las reglas de proveedores para la transformación Sin embargo, incluir la regla -ms-tranform provoca un error extraño en IE9 donde aplica las reglas filter y -ms-transform que hacen que una imagen se voltee y vuelva a aparecer.

Aquí está mi sugerencia de mejora, que también es compatible con las reglas CSS Lint:

.flip-horizontal { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */ 
    transform: scaleX(-1); 
    -ms-filter: fliph; 
    filter: fliph; 
} 
.flip-vertical { 
    -moz-transform: scaleY(-1); 
    -webkit-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(1); /* linting rule fix + IE9 fix */ 
    transform: scaleY(-1); 
    -ms-filter: flipv; 
    filter: flipv; 
}