CSS3 Transform

CSS3 Transformer sind Teil der W3C-CSS3 Recommendation.
Die neue Eigenschaft transform bestimmt, wie das angesprochene Element transformiert werden soll. Sie ermöglicht lineares transformationen von Elementen. Wir können sie verschieben, rotieren, skalieren und neigen.

Transformations 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>)
skewX(<angle>)
skewY(<angle>)
skew(<angle> [, <angle>]) 

Transformations Beispiele

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

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

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

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

Browser Syntax

Beim Neigen unterscheidet sich die Schreibweise von -moz- und -webkit- Browsern. Für -moz- muss skewx und skewy geschrieben werden.

.skw { 
-moz-transform:skewx(40deg) skewy(20deg); 
-webkit-transform:skew(40deg, 20deg);
-o-transform:skew(40deg, 20deg);
transform:skew(40deg, 20deg);
 }

Transformations Funktionen können alle kombiniert werden.

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