Browserübergreifende Möglichkeit, HTML/Bild über Javascript/CSS zu spiegeln?

Gibt es eine Bibliothek/einfache Möglichkeit, ein Bild zu spiegeln?

Flip-Bild wie folgt:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

Ich suche keine Animationendrehen Sie einfach das Bild um.

Ich habe nach keinem Avial gegoogelt und nur eine komplexe Version gefunden, die SVG verwendet MozillaZine von dem ich nicht überzeugt bin, dass es browserübergreifend funktioniert.

Das folgende CSS funktioniert in IE und modernen Browsern, die CSS-Transformationen unterstützen. Ich habe eine vertikale Flip-Klasse hinzugefügt, nur für den Fall, dass Sie sie vielleicht auch verwenden möchten.

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

Schauen Sie sich einen der vielen an Reflexion.js Typbibliotheken, Sie sind ziemlich einfach. Im IE werden sie den ‘flipv’-Filter nehmen und verwenden, es gibt auch einen ‘fliph’-Filter. In anderen Browsern wird ein Canvas-Tag erstellt und das drawImage verwendet. Obwohl Elijahs Antwort wahrscheinlich dieselben Browser unterstützt.

Ich habe diese Antwort gerade ausgegraben, während ich versuchte, einen Fehler zu beheben, obwohl die vorgeschlagene Antwort richtig ist, habe ich festgestellt, dass sie gegen die meisten modernen CSS-Linting-Regeln in Bezug auf die Einbeziehung aller Anbieterregeln für die Transformation verstößt. Das Einbeziehen der -ms-transform-Regel verursacht jedoch einen seltsamen Fehler in IE9, bei dem die Filter- und -ms-transform-Regeln angewendet werden, wodurch ein Bild gespiegelt und wieder zurückgespiegelt wird.

Hier ist mein Verbesserungsvorschlag, der auch CSS-Lint-Regeln unterstützt:

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

Wenn Sie nur ein Hintergrundbild umdrehen möchten, können Sie die Klasse für die internen Elemente innerhalb eines umgedrehten Div verwenden. Im Grunde spiegeln Sie die internen Elemente mit dem Haupt-Div um, aber spiegeln jedes von ihnen zurück. Funktioniert jedenfalls im Firefox.

So was:

<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>