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

73

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

Bild wie folgt umdrehen:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

Ich suche keine Animationen , drehe einfach das Bild um.

Ich habe zu keinem Avial gegoogelt und nur eine komplexe Version gefunden, die SVG auf MozillaZine verwendet. Ich bin nicht sicher, ob es browserübergreifend funktioniert.

javascript css image-manipulation Chakrit
quelle
Gibt es einen Grund, warum Sie nicht einfach zwei Kopien des Bildes haben können?
Cwallenpoole
3
@ Christopher W. Allen-Poole. Die Bilder werden vom Benutzer bereitgestellt und es gibt keine serverseitige Komponente ... nur einen einzigen HTML-Code mit XML-Datendatei als Backend ... also habe ich nur JS / CSS zum Umblättern ... wenn dies automatisiert werden kann, Es wird eine Sache weniger sein, sie zu unterrichten, als XMLs zu bearbeiten ...
Chakrit

Antworten:

193

Das folgende CSS funktioniert in IE und modernen Browsern, die CSS-Transformationen unterstützen. Ich habe eine vertikale Flip-Klasse eingefügt, nur für den Fall, dass Sie sie 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;
}
Eli Gray
quelle
3
Bitte nicht vergessen -o-transform: scale(-1,0);und -o-transform: scale(0,-1); dev.opera.com/articles/view/css3-transitions-and-2d-transforms
Jakob Cosoroaba
Vielen Dank. Ich habe Opera-Transformationen hinzugefügt.
Eli Gray
3
Keine Notwendigkeit für -ms-filter: "FlipH"?
Ebrahim Mohammadi
@EliGrey Könnte dies (oder etwas Ähnliches) auch über Firefoxs Scratchpad funktionieren? Das heißt, ich suche nach einer einfachen Möglichkeit, Live-HTML / CSS zu bearbeiten (ohne den ressourcenintensiven Firebug zu verwenden).
verrückt nach natty
Danke dafür. Beachten Sie, dass ich (mit Chrome) auch sicherstellen musste, dass es sich nicht um ein Inline-Element handelt. mit display: inline-block hat es für mich behoben.
Damien Sawyer
3

Schauen Sie sich eine der vielen Bibliotheken vom Typ Reflection.js an . 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.

Zwerg
quelle
2

Diese Antwort wurde einfach ausgegraben, während versucht wurde, einen Fehler zu beheben. Die vorgeschlagene Antwort ist korrekt. Ich habe festgestellt, dass sie gegen die meisten modernen CSS-Linting-Regeln hinsichtlich der Einbeziehung aller Herstellerregeln für die Transformation verstößt. Das Einschließen der Regel -ms-tranform verursacht jedoch einen merkwürdigen Fehler in IE9, bei dem die Filter- und -ms-Transformationsregeln angewendet werden, wodurch ein Bild immer wieder umgedreht 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;
}
Dave Storey
quelle
-3

Wenn Sie nur ein Hintergrundbild spiegeln möchten, können Sie die Klasse für die internen Elemente in einem gespiegelten Div verwenden. Grundsätzlich drehen Sie die internen Elemente mit dem Hauptteil um, aber drehen Sie jedes von ihnen zurück. Funktioniert sowieso in 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>
Jason Bailey
quelle