Effekte mit CSS3 – Teil 1: Die 2D-Transformationen

Mit den CSS3 Transformationen können Elemente (Bilder, DIV-Container, Videos, …) im Browser transformiert, also verschoben, verzerrt, rotiert und skaliert werden. Diese Effekte lassen sich sehr einfach nur mit CSS3-Code erstellen, ganz ohne dass man dazu Bilder oder JavaScript einsetzen müsste.

Animation_01

Ausgangszustand

Transformationen erstellt man mit der Eigenschaft transform.

Die hier beschriebenen Transformationen:

  • Verschiebung
  • Drehung
  • Verzerrung
  • Skalierung
  • Multi-Transformation

Transformation: Verschiebung

Die Verschiebung erfolgt mit dem Befehl translate (n1,n2); der 1. Wert ist für die Verschiebung auf der X-Achse und der 2. für die Verschiebung auf der Y-Achse, wobei auch negative Werte möglich sind:

Wird nur ein Wert eingegeben, wird automatisch auf der X-Achse verschoben:

Alternativ kann man die Achsen auch direkt mit translateX für die X-Achse und translateY für die Y-Achse ansprechen:

Bitte beachten Sie, dass in manchen Browsern eventuell Präfixe benötigt werden. Bezogen auf das obige Beispiel sähe das so aus:

Der Einfachkeit und Übersichtlichkeit halber werden diese Präfixe nicht in jedem der nachfolgenden Beispiele mit aufgeführt, aber diese können Sie sich auf der Internetseite des CSS3-Generators ganz einfach erstellen lassen.

2D-Transformation Verschieben

Verschiebung

Transformation: Drehung

Eine Rotation wird mit der Eigenschaft rotate erzeugt. Diese kann in Grad oder in anderen Werten wie rad, grad oder turns (Umdrehungen) angegeben werden. Am gängigsten ist die Grad- (deg-) Anweisung:

Drehung mit Präfixen:

2D-Transformation: Drehung

Drehung

Transformation: Verzerrung

Wird nur ein Parameter angegeben, wird automatisch nur auf der X-Achse verzerrt:

Werden zwei Parameter angegeben, wird auf der X- und Y-Achse verzerrt:

Alternativ kann man die Achsen auch direkt mit skewX bzw. skexY ansprechen:

Verzerrung mit Präfixen:

2D-Transformation: Verzerren

Verzerrung

Transformation: Skalierung

Verkleinerungen und Vergrößerungen erfolgen mit dem Befehl scale. Verkleinern auf die Hälfte:

Vergrößern auf das 1,5-fache:

nur auf der X-Achse skalieren:

nur auf der Y-Achse skalieren:

Skalierung mit Präfixen:

2D-Transformation: Skalieren

Skalierung

Skalierungen gehen von der Mitte des Elements aus (Standardverhalten). Dies kann aber mit der Eigenschaft transform-origin auch geändert werden, dafür müssen folgende Angaben direkt beim Element (zum Beispiel img) gemacht werden:

Der Standardwert ist 50% 50% und geht wie gesagt von der Mitte des Elements aus, also:

Mit 0% 0% startet man die Transformation von der linken oberen Ecke aus (das Element breitet sich dann in die Richtung nach rechts unten aus):

Mit 100% 100% startet man die Skalierung von der rechten unteren Ecke aus:

Auch Maßangaben wie beispielsweise Pixel sind möglich:

Auch möglich ist es, nur eine Seite anzugeben (bottom, left, right, top) von der aus die Transformation, in diesem Fall Skalierung, starten soll:

Multi-Transformationen

Man kann auch mehrere Transformationen gleichzeitig anwenden, diese werden dann nur mit einem Leerzeichen (also ohne Komma) voneinander getrennt eingegeben:

Hier gibt es neben dem oben schon erwähnten Code-Generator noch einen für 2D-Animationen.

Der 2. Teil des Kapitels zu den CSS3 Animationen – die 3-D-Transformationen – folgt in Kürze!