Transformation (transform)...
Geometrische Transformationen können mit der CSS-Eigenschaft transform definiert werden, die als Wert eine durch Leerzeichen getrennte Liste von Transformationsfunktionen erwartet.
transform: {Funktion 1}
           ...
           {Funktion n};
Vorbemerkungen:
Im Weiteren wird lediglich auf diejenigen Funktionen für 2D-Transformationen eingegangen, die jeweils einzelne geometrische Transformationen eines bestimmten Typs implementieren.
Die Spezifikation beim W3C liefert weitergehende Informationen, u.a. auch zur Verwendung von Matrizen zur Transformationsberechnung, zu 3D-Transformationen, zur Verwendung von SVG (Scalable Vector Graphics) und zu den mathematischen Grundlagen der Berechnung von Transformationen.
transform: rotate(10deg);
 
transform: skewX(30deg);
 
transform: rotate(10deg) skewX(30deg);
 
Koordinatenursprung (transform-origin)...
Der Koordinatenursprung für die Transformationen kann mit der CSS-Eigenschaft transform-origin festgelegt werden, welche die X- und die Y-Koordinate als Parameter erwartet.
transform-origin: {x}px {y}px;
Die Koordinaten können positiv oder negativ sein und beziehen sich auf die linke obere Ecke des Elements. Der Standardwert für beide Koordinaten ist 50%. Als Maßeinheit können px, pt, pc, in, mm, cm, em, ex und % verwendet werden.
Anstelle eines numerischen Wertes kann jeweils auch eines der folgenden Schlüsselworte angegeben werden.
Horizontal:
left = links
center = zentriert
right = rechts
Vertikal:
top = oben
center = zentriert
bottom = unten
transform-origin: 50% 50%;
transform: rotate(20deg);
 
transform-origin: 0em 0em;
transform: rotate(20deg);
 
transform-origin: right bottom;
transform: rotate(20deg);
 
Durch transformierte Elemente eingenommener Platz...
Durch die Anwendung von Transformationen ändert sich der Platz, den ein Element auf der Seite einnimmt, nicht.
D.h. benachbarte Elemente werden nicht verschoben.
Sie können aber von einem transformierten Element überlagert werden, falls der Platz, den das nicht transformierte Element einnehmen würde, nicht ausreicht, um das transformierte Element darzustellen.
transform: none;
Element davor
 
Element danach
transform: rotate(15deg);
Element davor
 
Element danach
Rotation (rotate)...
Die Rotationsfunktion (rotate) erwartet als einzigen Parameter den Winkel der Rotation.
transform: rotate( {Winkel}deg )
Der Winkel kann positiv (im Uhrzeigersinn) oder negativ (gegen den Uhrzeigersinn) sein. Als Maßeinheit kann deg (für Grad), turn (für Umdrehungen), grad (für Gon) und rad (für Bogenmaß) verwendet werden.
transform: rotate(-45deg);
 
Skalierung (scale)...
Die Skalierungsfunktion (scale) erwartet als Parameter den horizontalen und vertikalen Faktor für die Skalierung.
transform: scale( {horizontal},
                  {vertikal} )
Werte größer als 1 bewirken eine Vergrößerung, Werte kleiner als 1 eine Verkleinerung in der jeweiligen Richtung. Der Faktor darf nicht negativ sein.
Anmerkung:
Es gibt auch Skalierungsfunktionen scaleX und scaleY, die nur 1 Parameter für die Skalierung in der entsprechenden Richtung erwarten.
transform: scale(1,1);
 
transform: scale(0.75,0.75);
 
transform: scale(2,1);
 
transform: scaleX(2);
 
Verschiebung (translate)...
Die Verschiebungsfunktion (translate) erwartet als Parameter die horizontale und vertikale Distanz der Verschiebung.
transform: translate( {horizontal}px,
                      {vertikal}px )
Die Werte können positiv und negativ sein. Als Maßeinheit können px, pt, pc, in, mm, cm, em, ex und % verwendet werden.
Anmerkung:
Es gibt auch Verschiebungsfunktionen translateX und translateY, die nur 1 Parameter für die Verschiebung in die entsprechenden Richtung erwarten.
transform: translate(0em,0em);
 
transform: translate(-2em,1em);
 
 
transform: translateX(2em);
 
Schrägstellung in X-Richtung (skewX)...
Die Schrägstellungsfunktion in X-Richtung (skewX) erwartet als Parameter den Winkel für die Drehung entlang der X-Achse.
transform: skewX( {Winkel}deg )
Der Winkel kann positiv oder negativ sein. Als Maßeinheit kann deg (für Grad), turn (für Umdrehungen), grad (für Gon) und rad (für Bogenmaß) verwendet werden.
transform: skewX(40deg);
 
transform: skewX(-40deg);
 
Schrägstellung in Y-Richtung (skewY)...
Die Schrägstellungsfunktion in Y-Richtung (skewY) erwartet als Parameter den Winkel für die Drehung entlang der Y-Achse.
transform: skewY( {Winkel}deg )
Der Winkel kann positiv oder negativ sein. Als Maßeinheit kann deg (für Grad), turn (für Umdrehungen), grad (für Gon) und rad (für Bogenmaß) verwendet werden.
transform: skewY(15deg);
 
transform: skewY(-15deg);
 
Schrägstellung in X- und Y-Richtung (skew)...
Die allgemeine Schrägstellungsfunktion (skew) erwartet als Parameter 2 Winkel für die Drehung entlang der X- und der Y-Achse.
transform: skew( {X-Winkel}deg,
                 {Y-Winkel}deg )
Die Winkel können positiv oder negativ sein. Als Maßeinheit kann deg (für Grad), turn (für Umdrehungen), grad (für Gon) und rad (für Bogenmaß) verwendet werden.
Anmerkung:
Die skew-Transformation bewirkt nicht das gleiche, wie das nacheinander Ausführen von skewX und skewY mit denselben Parametern. Entsprechend der Beschreibung beim W3C müssen Implementierungen skew unterstützen, um die Kompatibilität mit alten Inhalten aufrecht zu erhalten.
transform: skew(40deg,20deg);
 
transform: skewX(40deg) skewY(20deg);
 
Weitere Informationen...
Browser-Unterstützung
Detaillierte Informationen über die Unterstützung der transform-Eigenschaft durch diverse unterschiedliche Browser-Versionen gibt es bei caniuse.com.
Formale Definition
Eine formale Definition der transform-Eigenschaft gibt es beim W3C.
CSS-Eigenschaften und Beispiele...
Auf den folgenden Seiten finden Sie einige technische Informationen und Beispiele zu CSS-Eigenschaften, die im CSS-Baukasten für Dekorationen und Schriftarten verwendet werden können:
Prografaktur Software GmbH | Hasenbergsteige 15 | 70178 Stuttgart | Deutschland | service@css-baukasten.de