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!