Transformieren mittels „transform“ geht weiter. Im ersten Teil habe ich gezeigt, wie Objekte skaliert („scale“) und gedreht („rotate“) werden können. „Transform“ bietet aber noch mehr. Zeit für Teil 2 mit den Hauptdarstellern „translate“ (verschieben von Objekten) und „skew“ (verzerren von Objekten).

Verschieben mit „translate“

Syntax

.box {
transform: translate(15px,50px);
}

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

.box {
-webkit-transform: translate(15px,50px);
-moz-transform: translate(15px,50px);
-o-transform: translate(15px,50px);
-ms-transform: translate(15px,50px);
transform: translate(15px,50px);
}
  • Apple Safari 5+
  • Google Chrome 10+
  • Internet Explorer 9+
  • Mozilla Firefox 3.6+
  • Opera 11.1+

Beschreibung

Die Wertangaben erfolgen in Pixeln. Der erste Wert (in der Klammer) bestimmt die Verschiebung der X-Achse, der zweite Wert die Verschiebung der Y-Achse. Ein positiver X-Wert verschiebt nach rechts, ein negativer nach links. Auf der Y-Achse sorgt ein positiver Wert für eine Verschiebung nach unten, ein negativer Wert nach oben.

Soll gezielt nur eine Achse verschoben werden, verwendet man translateX(...px) oder translateY(...px).

Verzerren mit „skew“

Syntax

.box {
transform: skew(15deg,4deg);
}

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

.box {
-webkit-transform: skew(15deg,4deg);
-moz-transform: skew(15deg,4deg);
-o-transform: skew(15deg,4deg);
-ms-transform: skew(15deg,4deg);
transform: skew(15deg,4deg);
}
  • Apple Safari 5+
  • Google Chrome 10+
  • Internet Explorer 9+
  • Mozilla Firefox 3.6+
  • Opera 11.1+

Beschreibung

Im Gegensatz zu „translate“ erfolgt hier die Wertangabe in Grad. Der erste Wert legt die Verzerrung der X-Achse fest, der zweite Wert die Verzerrung der Y-Achse. Auch hier gibt es die Möglichkeit gezielt eine Achse anzusprechen mit skewX(...deg) oder skewY(...deg).

Bilder sagen bekanntlich mehr als tausend Wort, daher schaut euch die Demo an:

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: