CSS3 - Transformation - Die Funktionen

1. matrix

Das war mir zu heftig! Wer Details dazu erfahren möchte, sollte sich das hier ansehen.

2. rotate

Dreht ein Element um einen bestimmten Winkel. Erlaubt ist ausschließlich eine positive oder negative numerische Angabe mit deg.

transform-origin

Ändert den Drehpunkt eines Bildes. Als Maßangabe sind alle Längeneinheiten erlaubt (px, %, em und so weiter). Negative Werte können ebenfalls angegeben werden. Die erste Angabe bezieht sich auf die x- und die zweite auf die y-Position.

.rotate {
  transform-origin:10px 20px;
  transform: rotate(10deg);
  -webkit-transform-origin: 10px 40px;
  -webkit-transform: rotate(10deg);
}

3. Ein Hinweis

Bei allen folgenden "Funktionen" gibt es mehrere Gemeinsamkeiten.

• Es gibt zwei Parameter, einen für die horizontale und einen für die vertikale Richtung. Nimmt man nur einen Wert, so gilt der für beide.
• Es gibt immer eine zusätzliche X und Y-"Funktion, die nur einen Parameter erwartet, also zum Beispiel scaleX.
• Für alle Funktionen sind laut Spezifikation noch dreidimensionale Erweiterungen vorgesehen, funktionieren aber derzeit nicht.

4. scale

Vergrößert ein Element um den angegeben Faktor. Erlaubt sind ausschließlich numerische Angaben, entweder als Ganz- oder Fließkommazahl (englische Notation).

.scale {
  transform: scale(1.2);
  -webkit-transform: sale(1.2,1.1);
}

5. skew

Schrägt Elemente ab. Dabei kommen die rechten Winkel im Schaubild aus dem vorherigen Abschnitt zur Geltung. Die Winkel der Ecken a und d werden horizontal und die der Ecken b und c vertikal verformt. Erlaubt sind ausschließlich positive oder negative numerische Angaben mit deg.

.skew {
  transform: skew(20deg, 10deg);
  -webkit-transform: skew(20deg, 10deg);
}

6. translate

Verschiebt ein Element um einen bestimmten Wert. Als Maßangabe sind alle Längeneinheiten erlaubt (px, %, em und so weiter).

.translate {
  transform: translate(10px, -5px);
  -webkit-transform: translate(10px, -5px);
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt