Transformation

Beispiele

Wie wärs mal mit hochkant?

Rotation

#rotate { transform:rotate(45deg);

Rotation

#rotate { transform:rotate(45deg);

Code Beispiel 1

#main #rotate
{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}

Code Beispiel 2

#main #rotate:hover
{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
}

Code Beispiel 3

#main #skew
{
-webkit-transform:skew(45deg,-10deg);
-moz-transform:skew(45deg,-10deg);
transform:skew(45deg,-10deg);
}

Die Eigenschaft transform ermöglicht mit den folgenden Werten:

  • translate [verschieben]
  • scale [skalieren]
  • rotate [drehen]
  • skew [verzerren]

Allgemeine Syntax:

Verschieben
transform:translate(100,100);
// verschiebt das Element um 100 Pixel nach rechts und nach unten.
Wird nur ein Wert angegeben, ist der zweite Wert 0 (Null)


Skalieren
transform:scale(2,.5);
// skaliert das Element in x-Richtung (Breite) um den Faktor 2 und in y-Richtung (Höhe)
um den Faktor 0,5 -> das Element wird doppelt so breit und halb so hoch dargestellt.
Wird nur ein Wert angegeben, skaliert das Element in beide Richtungen um den angegebene Wert. 

Drehen
transform:rotate(90deg);
// dreht das Element um den angegebenen Winkel

Verzerren
transform:skew(30deg,45deg);
// verzerrt das Element um die angegebenen Winkel. Der erste Wert gilt für die Verzerrung in der x-Achse (horizontal), der zweite Wert für die Verzerrung in die y-achse (vertikal).

nach oben