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
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:
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:
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);