
CSS3-Transformationen sind eine schöne Sachen. Hinter die Eigenschaft transform
schreibt man die gewünschte Operation wie beispielsweise rotate()
, um ein Element zu drehen, oder scale()
, um ein Element zu vergrößern bzw. zu verkleinern.
Die folgende Zeile
transform: scale(2);
macht ein Element etwa doppelt so groß. Entsprechend wird durch
transform: scale(0.5);
ein Element halb so groß wie ursprünglich.
Worauf man vielleicht nicht sofort kommt: Ein negative Wert bei scale()
spiegelt ein Element.
In der Abbildung befindet sich links das Original und rechts das mit scaleX(-1)
gespiegelte Bild:

Die entsprechende Spiegelung mit scaleY(-1)
zeigt die folgende Abbildung:

scale(-1)
(also scale()
ohne X
oder Y
) macht dasselbe wie rotate(180deg)
, ist also nicht so interessant.
Das Beispiel bei jsfiddle zeigt noch einmal die Unterschiede zwischen Drehung mit rotate()
und Spiegelung mit scaleX(-1)
und scaleY(-1)
.
Das Spiegeln mithilfe von transform
funktioniert wie die 2D-Transformationen prinzipiell in allen Browser. Fals man den Internet Explorer 9 unterstützen möchte, muss man die Angabe allerdings mit dem Präfix -ms-
schreiben. Und für ältere Webkit-Browser benötigt man noch -webkit-
.
Konnte ich gerade gebrauchen (DropDown-Navigation => fontawesome arrow down|up). Danke!
schön, wenns nützt!