Florence Maurice

Webthemen

Reihenfolge von Elementen mit transform umkehren

Geschrieben am:

Elemente mit umgekehrter Reihenfolges

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:

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.