Profiwissen CSS3

Transformationen im Handumdrehen mit CSS3

Gedrehte Boxen, skaliert oder verzerrt - früher ein klarer Fall für Bilder. Mit CSS 3 können Sie die Transformationen direkt vornehmen. Dafür bringt es auch noch weniger HTTP-Requests und bessere Performance.

  1. Transformationen im Handumdrehen mit CSS3
  2. Performanceoptimiert
  3. Matrix-Filter
image.jpg

© Internet Magazin

Transformationen im Handumdrehen

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.

image.jpg

© Internet Magazin

Schöne Beispiele für mit transform gedrehte Schatten zeigt Nicolas Gallagher - und das alles ohne Bilder.

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)

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…