Textrotation mit CSS 3

Mit Hilfe von CSS3 kann man HTML-Objekte verformen. Unter diesem auch als Transformieren bezeichneten Vorgang fasst man zusammen:

  • Skalieren - Veränderung der Größe
  • Rotieren - also Drehen
  • Verschieben in x oder y oder beide Richtungen (translate)
  • Verzerren/Schrägen in x oder y oder beide Richtungen (skew)

Syntax

Alle diese Veränderungen können gleichzeitig oder auch wahlweise vorgenommen werden. Grundlage ist diese CSS3-Anweisung:

transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);

Mit diesen Werten wird das Objekt nicht verändert. Um die Unterstützung aller Browser zu gewährleisten, muss auch hier wieder mit browserspezifischen Präfixen gearbeitet werden, also:

-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);

Beispiele

Diese Ausgangsobjekt

Text

Wie auf 50% der Ausgangsgröße skaliert, um 15 Grad gedreht und um 50 Pixel in Richtung der X-Achse verschoben. Das sieht dann so aus:

Text

Der CSS-Code für diese Verformung ist:

-moz-transform: scale(0.5) rotate(15deg) translate(50px, 0px);
-webkit-transform: scale(0.5) rotate(15deg) translate(50px, 0px);
-o-transform: scale(0.5) rotate(15deg) translate(50px, 0px);
-ms-transform: scale(0.5) rotate(15deg) translate(50px, 0px);
transform: scale(0.5) rotate(15deg) translate(50px, 0px);

Beim zweiten Beispiel wird das Ausgangsobjekt um 15 Grad in Richtung der X-Achse verzerrt:

Text

Dazu der CSS-Code:

-moz-transform: skew(-15deg, 0deg);
-webkit-transform: skew(-15deg, 0deg);
-o-transform: skew(-15deg, 0deg);
-ms-transform: skew(-15deg, 0deg);
transform: skew(-15deg, 0deg);