Nachdem wir vor wenigen Tagen Animationen mit CSS3 via transition vorgestellt haben, wollen wir dieses Mal noch eine Grundlage für weitere nette Möglichkeiten der Animation mit CSS3 legen und damit ein weiteres experimentelles CSS3-Modul vorstellen: 2D-Transformationen (siehe Link für die genaue Spezifikation vom W3C).
Da es neben den 2D-Transformationen auch noch 3D-Transformationen gibt, die noch deutlich komplizierter und umfangreicher sind, möchten wir im ersten Teil dieser zweiteiligen Artikelserie nur die 2D-Transformationen betrachten. Das heißt natürlich nicht, dass dieser erste Teil weniger anspruchsvoll noch weniger interessant ist, denn auch mit 2D-Transformationen kann man schon einige spannende Dinge realisieren, für die man früher Javascript oder Bilder benötigte. Doch fangen wir am besten von vorne an…
Frage 1: Was sind 2D-Transformationen?
Mit 2D-Transformationen lassen sich relativ einfach HTML-Elemente (bspw. Boxen oder auch Bilder) in der x-y-Ebene verschieben, verzerren, vergrößern/verkleinern, drehen, spiegeln und vieles mehr.
Frage 2: Was benötige ich dafür?
Genauso wie alle anderen experimentellen CSS3-Module benötigen auch 2D-Transformationen einen mehr oder weniger modernen Browser. Genauer gesagt, werden die Transformationen in folgenden Browsern unterstützt: Mozilla Firefox 3.5+, Google Chromium, Microsoft Internet Explorer 9+, Opera 10.50+, Safari 3.1+ und alle darauf aufbauenden Browser.
Frage 3: Welche CSS-Eigenschaften stehen zur Verfügung?
Zur Realisierung der Transformationen stehen zwei neue CSS-Eigenschaften zur Verfügung. Da sich jedoch das CSS-Modul noch in der Entwicklungsphase befindet, müssen zur Verwendung wieder die bekannten Browser-spezifischen Präfixe vor die jeweiligen Eigenschaften (-moz-, -webkit-, -ms-, -o-) geschrieben werden. Der Übersichtlichkeit wegen werden diese jedoch im folgenden ignorieren.
- transform: Diese Eigenschaft erwartet den Wert “none” für keine Transformation, eine einzelne Transformations-Funktion oder eine per Leerzeichen getrennte Auflistung von Transformations-Funktionen. Welche Transformations-Funktionen zur Verfügung stehen, wird weiter unten erklärt.
- transform-origin: Mit dieser Eigenschaft lässt sich der Startpunkt bzw. bei Drehungen den Mittelpunkt der Drehachse festlegen. Erwartet werden zwei Werte, welche entweder Prozentzahlen, Längenangaben oder Ausrichtungen (center, left, right, top, bottom) – der erste Wert bezieht sich hierbei auf die x-Achse und der zweite auf die y-Achse. Alternativ wird auch nur ein Wert akzeptiert, der sich auf die x-Achse bezieht. Wird diese Eigenschaft nicht angegeben, dann ist der Standardwert hier “50% 50%”.
Frage 4: Welche Transformations-Funktionen kann ich verwenden?
- rotate(<Winkel>): Wie wohl unschwer am Funktionsname zu erkennen ist, lassen sich mit dieser Funktion Elemente (im Uhrzeigersinn!) drehen. <Winkel> ist hierbei durch einen Winkel. Wichtig ist hierbei, dass die Einheit auch angegeben werden muss (deg für das Gradmaß, rad für das Bogenmaß). Hier findet sich eine Beispiel-Seite.
- scale(<Zahl> [, <Zahl>]) / scaleX(<Zahl>) / scaleY(<Zahl>): Mit diesen drei Funktionen lässt sich die Größe von Elementen verändern. In ersterer Funktion lässt sich das Element in x- und y-Richtung skalieren (wird nur ein Wert angegeben, so wird für x- und y-Richtung der gleiche Wert angenommen). scaleX dagegen modifiziert das Element nur in der Horizontalen, scaleY in der Vertikalen. Man beachte hierbei, dass keine Einheit für die Werte angegeben werden darf! Hier findet sich eine Beispiel-Seite.
- skew(<Winkel> [, <Winkel>]) / skewX(<Winkel>) / skewY(<Winkel>): Mit diesen Funktionen lassen sich Elemente verzerren. In der ersteren Funktion lässt sich das Element in x- und y-Richtung verzerren (wird nur ein Wert angegeben, wird nur in x-Richtung verzerrt). skewX und skewY funktionieren dagegen analog zu scaleX und scaleY. Zu beachten ist, dass hier wieder Winkel inkl. der Einheit angegeben werden müssen. Hier findet sich eine Beispiel-Seite.
- translate(<Länge> [, <Länge>]) / translateX(<Länge>) / translateY(<Länge>): Diese Funktionen ermöglichen es, ein Element in x- und y-Richtung zu verschieben (über Sinn und Unsinn hierbei lässt sich sicherlich streiten). Die erstere Funktion lässt das Element in x- und y-Richtung verschieben (wird nur ein Wert angegeben, dann wird nur in x-Richtung verschoben), translateX und translateY funktionieren wieder analog zu scaleX und scaleY. Hier muss beachtet werden, dass eine Längenangabe inkl. Einheit angegeben werden muss (z.B. px, em,…). Hier findet sich eine Beispiel-Seite.
- matrix(<Zahl>, <Zahl>, <Zahl>, <Zahl>, <Zahl>, <Zahl>): Diese Funktion ist eine Zusammenfassung der vorigen Funktionen. Die einzelnen Parameter haben hierbei folgende Bedeutungen: Der erste Parameter entspricht scaleX, der zweite skewY, der dritte skewX, der vierte scaleY, der fünfte translationX und der letzte translationY. Zu beachten ist hierbei jedoch, dass bei keinem der sechs Parameter eine Einheit angegeben werden darf. Lediglich im Firefox dürfen bei den letzten beiden Parametern die Einheiten angegeben werden. Außerdem ist zu beachten, dass bei Parameter zwei und drei weder Gradmaß noch Bogenmaß angegeben wird, sondern der Tangens der entsprechenden Werte (z.B. für 45° ist 1 anzugeben, da tan(45deg) = 1).
Für die Rotation ergibt sich im Übrigen folgender Zusammenhang: rotation(x) = matrix(cos(x), sin(x), -sin(x), cos(x), 0, 0). Anzugeben sind natürlich die entsprechenden Werte anstatt der sin-/cos-Funktion.
Hier findet sich eine Beispiel-Seite.
Frage 5: Weitere Fragen?
Gerne. Wem noch etwas unklar ist, kann gerne einen Kommentar verfassen und seine Frage stellen. Wir bemühen uns dann, diese schnellstmöglichst zu beantworten.
Demnächst geht es dann weiter mit dem zweiten Teil und 3D-Transformationen…
[UPDATE 29.03.2012]Die Auflistung mehrerer Transformations-Funktionen in der Eigenschaft transform wird natürlich nicht mit Kommas getrennt, sondern einfach nur durch Leerzeichen.[/UPDATE]