Elemente mit scale() spiegeln
Geschrieben am: , aktualisiert:
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. Man kann aber auch Elemente damit spiegeln.
Erst einmal zur klassischen Verwendung. 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.