CSS Transform – drehen, flippen, kippen ohne JS


Seit HTML5 und CSS3 ist so Einiges möglich, wofür man früher noch JavaScript brauchte. Trotzdem werden sehr viele Effekte nach wie vor mittels JavaScript bzw. jQuery umgesetzt. Zum Teil hat das wohl damit zu tun, dass es anfangs eine Weile gedauert hat, bis transformations in allen Browsern funktionierten. Da war es einfacher, gleich bei der gewohnten Herangehensweise zu bleiben, und hübscher, als der unübersichtliche Vendor-Prefixes-Dschungel.

Das ist inzwischen längst kein Problem mehr, die Browser wissen mit der transform-Property umzugehen. In diesem Artikel setzen wir uns mit einigen netten Effekten auseinander, die sich, ganz ohne programmieren zu müssen, umsetzen lassen.

Praktische Übungen dazu und zu vielen weiteren Themen gibt es bei den ppedv-Kursen, beispielsweise bei der Powerwoche HTML5, CSS3 undResponsive Design.


Transformationen: rotate, skew und scale

Beginnen wir mit den einfachsten Übungen: ein Element rotieren, verzerren und skalieren. Dafür gibt es die jeweils passende Anweisung: rotate, skew und scale.

Diese Anweisung wird dem Element, das „transformiert“ werden soll, gegeben:


In Klammer wird angegeben, um wieviel Grad (deg) das Element gedreht werden soll. Eine positive Zahl bedeutet eine Drehung im Uhrzeigersinn, eine negative entgegen dem Uhrzeigersinn.

Die Anweisung oben dreht unser Element also um 45° nach rechts:



Ebensoleicht kann mit den Anweisungen rotateX, rotateY oder rotateZ spezifiziert werden, ob eine Drehung nur um die x-, y- oder z-Achse – oder um alle drei stattfinden soll.

Beachte: rotate ist etwas anderes als rotateX! Rotate entspricht einer Rotation um die z-Achse.

Wird nur rotate angegeben, wird bei positivem übergebenem Wert im und bei negativem gegen den Uhrzeigersinn gedreht.

Bei rotateX hingegen wird das Element UM die x-Achse gedreht; es entsteht also ein Kippeffekt.

transform: rotateX(45deg) ergibt also:




Wir rotieren um die x-Achse, allerdings (noch) ohne perspektivische Verzerrung.

Diese Anweisungen lassen sich auch mit :hover kombinieren – und alleine damit lässt sich schon eine ganze Menge Bewegung auf die Seite bringen!

Die Anweisung transform: skew(45deg); bewirkt eine Verzerrung (Englisch: skew = verzerren; schief). Auch dabei kann entschieden werden, von welcher Achse ausgehend verzerrt werden soll.



Auch eine Kombination ist möglich: transform: skew(45deg, 15deg) bewirkt eine Verzerrung von 45° an der x- und 15° an der y-Achse. Die Werte für x- und y-Achse werden mittels Komma getrennt.

 

Mit scale schließlich können Elemente skaliert werden; auch hier kann man sich für scaleX, scaleY oder einfach nur scale (gilt dann für beide Werte) entscheiden. Der Wert in der Klammer steht für den Faktor, um den skaliert wird. transform: scaleX(2) bringt unser Quadrat auf die doppelte Breite:




Von 2D- zu 3D-Effekten: perspective

Weiter oben haben wir unser blaues Quadrat ja schon mittels transform: rotateX(45deg) um die x-Achse gekippt. Optisch hat das allerdings noch nicht so gewirkt, als wäre es gekippt worden, sondern nur, als hätte jemand das Element gequetscht. In Kombination mit :hover wird deutlich, dass diese Form tatsächlich durch eine Rotation um die x-Achse zustande kommt, aber damit wir es auch als 3D-Effekt wahrnehmen, brauchen wir noch etwas anderes: Perspektive.

Die perspective-Eigenschaft wird allerdings nicht dem Element selbst, sondern dem übergeordneten Element vergeben. Sie bestimmt, wie sich die Kind-Elemente verhalten sollen. Mittels einer Längenangabe wird festgelegt, wie weit der User von der z-Ebene des Elementes entfernt ist:



Je kleiner der Wert, desto stärker die perspektivische Verzerrung:



Diese Verzerrung funktioniert natürlich auch für die y-Achse (oder für alle):



Der Fluchtpunkt liegt per Default im Zentrum des Elements; doch auch das lässt sich ändern.

 

Versetzen des Fluchtpunktes: perspective-origin

Ebenfalls dem übergeordneten Element wird die Anweisung bezüglich des Fluchtpunktes mitgegeben: perspective-origin.

Wird nur ein Wert übergeben, betrifft dieser die x-Position, bei zwei Werten zuerst x-, dann y-Position. Valide Werte sind top, right, center, bottom und left, Prozentangaben oder auch Längenangaben. Auch negative Werte sind zulässig.




In diesem Beispiel auf codepen könnt Ihr ausprobieren, wie sich eine Veränderung von position-origin an der x-Achse auswirkt.


Mögliche Angaben für perspective-origin

x-Werte

left, center, right, %, Längenangabe (z.B. in px)

y-Werte

top, center, bottom, %, Längenangabe


Mehrere Objekte in 3D: transform-style: preserve-3d

Bisher haben wir allerdings nur ein einzelnes Beispielobjekt betrachtet (bzw. es stillschweigend hingenommen, dass das orangefarbene „ursprüngliche“ Quadrat hinter dem blauen liegt). Was, wenn sich nun mehrere Objekte in einer 3D-Umgebung befinden sollen?

Packen wir einfach ein weiteres Div in den Container, liegen die Elemente übereinander, in der Reihenfolge, wie sie im Dokumentfluss angeordnet sind:




Das grüne Quadrat ist offensichtlich das zuletzt hinzugekommene. Optisch ist das schon „so irgendwie“ ein 3D-Effekt, aber die Elemente erscheinen nicht dort, wo sie laut unserer sorgfältigen Positionierung mittels rotate und perspective eigentlich sein sollten.

Aber auch dafür hat CSS eine Lösung: transform-style: preserve-3d. Diese Anweisung wird dem übergeordneten Container gegeben und wirkt sich wiederum auf das Verhalten der Kindelemente im Raum aus.

Das obige Beispiel noch einmal, allerdings mit transform-style: preserve-3d gesetzt ergibt nun ein völlig anderes Bild:




Mit diesen einfachen Mitteln lassen sich schon einige spannende Effekte erzielen!

Viel Spaß beim Herumprobieren, und vielleicht sehen wir uns ja in einem unserer Kurse zum Thema HTML und CSS!




Kommentare sind geschlossen