CSS3 Transform

CSS3 Transformer sind Teil der W3C-CSS3 Recommendation.
Die neue Eigenschaft transform bestimmt, wie das angesprochene Element transformiert / verändert werden soll. Sie ermöglicht lineare Transformationen von Elementen. Wir können Elemente verschieben, rotieren, skalieren oder neigen.

Transformation Funktionen

Neue Browser unterstützen diese Definitionen. Webkit- und Mozilla-Browser benötigen ein Präfix.

translate(<translation-value>[, <translation-value>])
translateX(<translation-value>)
translateY(<translation-value>)

scale(<number>[, <number>])
scaleX(<number>)
scaleY(<number>)

rotate(<angle>)

skew(<angle> [, <angle>])  MDN says: do not use, use skewX/skewY resp. matrix()
skewX(<angle>)
skewY(<angle>) 

Transformation Beispiele

translate verschiebt hier das Element um 20px in beide Richtungen (X- und Y-Achse).
.trnl { transform: translate(20px, 20px); }

rotate das Element wird um die Z-Achse in Uhrzeiger-Richtung gedreht. Minuswerte drehen das Element in die andere Richtung.
.roat { transform: rotate(50deg); }

scale skaliert hier das Element um 150%. Minuswerte sind auch möglich.
.skl { transform: scale(1.5, 1.5) }

skew neigt die Fläche im angegebenen Winkel und der definierten Richtung.
.skw { transform: skewX(40deg) skewY(20deg); }

Browser Syntax

skew(<x-angle>, <y-angle>) wird noch unterstützt, ist aber in der aktuellen CSS3-Spezifikation zu Gunsten von skewX() resp. skewY() (oder der matrix-Funktion) entfernt worden, vgl. MDN: "The skew() function was present in early drafts. It has been removed but is still present in some implementations. Do not use it. Use skewX/skewY resp the matrix-function".

skewX(<angle>); 
skewY(<angle>);
Deprecated: skew(<x-angle>, <y-angle>);

.skw { 
-webkit-transform: skewX(40deg) skewY(20deg);
   -moz-transform: skewX(40deg) skewY(20deg);
     -o-transform: skewX(40deg) skewY(20deg); 
        transform: skewX(40deg) skewY(20deg);
}
/* FFox auch ohne Prefix ab v.16+ */

Alle Transformation Funktionen können kombiniert werden.

.all {
transform: translate(50px, 50px) scale(1.5, 1.5) rotate(25deg);
}