Transformationen im Handumdrehen mit CSS3

Wenn Sie gedrehte Elemente über CSS anstelle von Grafiken realisieren, bringt das noch mehr Vorteile als nur eine verbesserte Performance:

• Wartbarkeit: Soll der Text verändert oder die Art der Drehung modifiziert werden, so brauchen Sie hierfür nur den Code anzupassen und müssen nicht extra ein neues Bild im Bildbearbeitungsprogramm erstellen.
• Auslesbarkeit: Der Text ist von Suchmaschinen genauso wie von Screenreadern auslesbar im Gegensatz zu Text, der in Bildern integriert ist.
• Benutzbarkeit: Wenn Sie Text statt Bild haben, so wird der Text bei einer Schriftvergrößerung ebenfalls vergrößert. Zwar haben inzwischen alle Browser auch eine integrierte Zoomfunktion, durch die die gesamte Webseite vergrößert wird und damit auch die Bilder. Doch skalierte Grafiken sind meist weniger scharf, was sich insbesondere bei vergrößerten Schriftgrafiken bemerkbar macht.

CSS-Transformationen werden von allen modernen Browsern unterstützt, im Internet Explorer ab Version 9. Für ältere IEs gibt es Fallbacklösungen über den Matrix-Filter oder Javascript - zu beiden Alternativen lesen Sie im weiteren Verlauf dieses Artikels mehr.

2D-Transforms - Grundlagen

Für Transformationen ist die Eigenschaft transform zuständig. Hinter dieser geben Sie an, wie ein Element modifiziert werden soll. transform: rotate(30deg) dreht ein Element um 30 Grad.Diese Eigenschaft müssen Sie mit allen browserspezifischen Präfixen versehen: Firefox benötigt moz-, Webkit-Browser wie Safari oder Chrome brauchen -webkit-, -o- ist für Opera vorgesehen und -ms- für den Internet Explorer. Damit lautet der Code, um ein Element um 30 Grad zu drehen, folgendermaßen:

.gedreht {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

Die offizielle Eigenschaft ohne Präfix sollten Sie zuletzt angeben. Wenn ein Browser dann die offizielle Eigenschaft unterstützt, wird er diese anwenden, wodurch eine größtmögliche Darstellungskonsistenz gewahrt bleibt.

Die Drehung erfolgt im Uhrzeigersinn; wenn Sie einen negativen Wert schreiben, wird also gegen den Uhrzeigersinn gedreht: transform: rotate(-45deg);Der Punkt, um den die Drehung erfolgt, entspricht im Beispiel dem Mittelpunkt des Elements, Sie können ihn über transform-origin verschieben. Durch folgenden Code wird der Mittelpunkt auf die linke untere Ecke gesetzt.

-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;

Die Prozentangaben funktionieren dabei genauso wie die beiden Angaben zur Bestimmung der Position von Hintergrundbildern. Die erste Angabe geht von links aus, die zweite von oben. Deswegen bestimmt 0% 100% die linke untere Ecke. Daneben können Sie auch die gängigen Schlüsselwörter wie top oder bottom verwenden.

Skaliert, verschoben und verzerrt

Über scale() verändern Sie die Größe von Elementen; den Faktor der Skalierung übergeben Sie in runden Klammern. Folgender Code vergrößert ein Element leicht beim Hovern, nämlich auf 120%. Das Element wirkt damit beim Überfahren der Maus so, als würde es ein Stück auf den Betrachter zukommen.

.groesser:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

Sollen Elemente nicht symmetrisch skaliert werden, geben Sie zwei Werte hinter scale() an: Der erste verändert die Breite, der zweite bezieht sich auf die Höhe:

transform: scale(2, 3);

Mit dieser Angabe hat ein Element, das ursprünglich Ausmaße von 100 Pixel x 100 Pixel hatte, eine Breite von 200 Pixeln bei 300 Pixeln Höhe. Asymmetrische Skalierungen können Sie auch vornehmen, indem Sie mit scaleX() für die Breite und scaleY() für die Höhe operieren.Verschiebungen realisieren Sie über translate(), hinter dem Sie zwei Werte angeben.

transform: translate(200px, 300px)