Elemente mit scale() spiegeln

spiegeln mit scale()

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:

Spiegeln mit scaleX

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

spiegeln_scaleY

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 aktuellen Browser und im Internet Explorer 9, er benötigt allerdings das Präfix -ms-. Und Safari braucht -webkit-, so dass man die Angaben drei Mal schreiben muss.

2 Kommentare zu “Elemente mit scale() spiegeln”

  1. Matu

    Konnte ich gerade gebrauchen (DropDown-Navigation => fontawesome arrow down|up). Danke!

    Antworten
    • Florence

      schön, wenns nützt!

      Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>