Reihenfolge von Elementen mit transform umkehren

Umgekehrte Reihenfolge

Manchmal möchte man die Reihenfolge bei der Anzeige von Elementen abändern. Dafür gibt es mehrere Möglichkeiten – und ganz raffiniert fand ich, dass man dafür auch transform nutzen kann. transform ist praktisch, wenn man die Reihenfolge der Elemente exakt umkehren möchte, so dass das Element, das im Quellcode zuletzt steht, am Anfang angezeigt wird etc.

Aber zuerst zu anderen Möglichkeiten:

  • Flexbox erlaubt die Anpassung der Reihenfolge natürlich von Haus aus. Dafür kann man die Eigenschaft order nutzen und damit die Elemente in beliebiger Reihenfolge anzeigen lassen.
  • Für Gridlayout ist das ein Kinderspiel (da kann man die Reihenfolge der Elemente im Raster genauestens festlegen – ein Beispiel für eine Umsetzung eines Layouts mit Gridlayout zeige ich bei den Webkrauts).
  • Erstaunlicherweise kann man dafür auf display: table & Konsorten zurückgreifen.

Und auch transform kann man zur Umkehrung der Reihenfolge nutzen. Und zwar so:

Nehmen wir ein umfassendes Element mit mehreren Kindelementen, mit den Texten Eins, Zwei, Drei und Vier:

<div class="container">
<p>Eins</p>
<p>Zwei</p>
<p>Drei</p>
<p>Vier</p>
</div>

Standardmäßig sieht das folgendermaßen aus:

Standardreihenfolge - eins - zwei - drei - vier

Die  Reihenfolge soll umgekehrt werden, so dass zuert Vier, dann Drei, Zwei und schließlich Eins zu sehen ist.

Elemente in umgekehrter Reihenfolge - vier - drei - zwei - eins

Um die Reihenfolge umzukehren, braucht man scaleY(). Meist verwendet man scaleY() um die Höhe von Elementen zu modifizieren. Mit dem Wert -1 kann man es hingegen zum Spiegeln von Elementen benutzen.
Zuerst einmal spiegeln wir den .container um die y-Achse:

.container {
transform: scaleY(-1);
}

Das Zwischenergebnis nach der Spiegelung sieht folgendermaßen aus: Die Reihenfolge ist schon wie gewünscht, allerdings sind auch die Texte gespiegelt.

Gespiegelte Schrift und umgekehrte Reihenfolge mit transform

Um die Texte wieder normal anzeigen zu lassen, spiegeln wir noch die innerhalb von .container befindlichen Absätze.

.container p {
transform: scaleY(-1);
}

Damit haben wir das gewünschte Ergebnis.

Beispiel bei JSFiddle ausprobieren.

 

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>