Cross-navigateur moyen de retourner html/image via Javascript/CSS?

Question

Existe-t-il une bibliothèque/un moyen simple de retourner une image?

retourner une image comme ceci:

AABBCC  CCBBAA 
AABBCC -> CCBBAA 

Je ne cherche pas des animations, flip juste l'image.

J'ai googlé à aucun avial et seulement trouvé une version complexe qui a utilisé SVG sur MozillaZine dont je ne suis pas sûr que cela fonctionnera cross-browser.

Answer 1

Les CSS suivants fonctionneront dans IE et les navigateurs modernes qui prennent en charge les transformations CSS. J'ai inclus une classe de retournement vertical juste au cas où vous voudriez l'utiliser aussi.

.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

Jetez un oeil à l'une des nombreuses bibliothèques reflection.js de type, ils sont assez simples. Dans IE ils prendront et utiliseront le filtre 'flipv', il y a aussi un filtre 'fliph'. À l'intérieur des autres navigateurs, il créera une balise canvas et utilisera drawImage. Bien que la réponse d'Elijah supporte probablement les mêmes navigateurs.

Answer 3

Si vous souhaitez uniquement retourner une image d'arrière-plan, vous pouvez utiliser la classe sur les éléments internes à l'intérieur d'une div inversée. Fondamentalement, vous renversez les éléments internes avec la div principale, mais en retournant chacun d'eux. Fonctionne dans Firefox de toute façon.

Comme ceci:

<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

Juste déterré cette réponse tout en essayant de corriger un bug, alors que la réponse proposée est correcte, j'ai trouvé que ça casse CSS règles de peluchage les plus modernes en ce qui concerne l'inclusion de toutes les règles du fournisseur pour la transformation. Cependant, l'inclusion de la règle -ms-tranform provoque un bogue bizarre dans IE9 où il applique les règles de filtre et de transformation -ms provoquant une inversion et une inversion de l'image.

Voici mon amélioration suggérée qui prend également en charge les règles 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; 
}