transform: Element transformieren (2D)

0 | 8846 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "transform: Element transformieren (2D)" mit Ihrem Wissen!

Anzeige Hier werben

transform (2D)

Werte: none, Transformationsfunktion
Standardwert: none
Vererbung: Ja
Kurzschreibweise: -
Anwendbar auf: alle Elemente
CSS-Level: CSS3

Die Eigenschaft transform bestimmt, wie das angesprochene Element transformiert werden soll.

Werte

Firefox2Nein3Nein3.5Unbekannt
IE6Nein7Nein8Nein
Opera9.5Nein10Unbekannt
Safari3Nein4Unterstützt
animation-duration

Es kann none angegeben werden, um keine Transformation zu erlauben, oder eine der folgenden Transformationsfunktionen:

Wert Darstellung Bedeutung Skizze
matrix (Matrix)matrix(sechs mit Komma getrennte Zahlen)
Mithilfe dieser Funktion lassen sich auch alle anderen Trnsformationsfunktionen darstellen. Mehr Informationen zum Aufbau und Grundlagen.
translate (Übersetzung) translate(maximal zwei mit Komma getrennte Zahlen)
Verschiebung. Die erste der beiden Zahlen gibt die X-Verschiebung um ihren Wert an, die zweite die Y-Verschiebung. Ist die zweite nicht gegeben ist sie 0.
Bild zu transform: Element transformieren (2D)
translateX (X-Übersetzung) translateX(Zahl) Verschiebung in X-Richtung.
translate (Y-Übersetzung) translateY(Zahl) Verschiebung in Y-Richtung.
scale (Skalierung) scale(maximal zwei mit Komma getrennte Zahlen)
Vergrößerung oder Verkleinerung. Die erste Zahl gibt die X-Skalierung, die zweite die Y-Skalierung an. Zahlen größer 1 ergeben eine Vergrößerung relativ zum Grundzustand, Zahlen kleiner 1 eine Verkleinerung. Ist die zweite Zahl nicht angegeben, ist sie gleich der ersten.
Bild zu transform: Element transformieren (2D)
scaleX (X-Skalierung) scaleX(Zahl)
Skalierung in X-Richtung (horizontale Skalierung).
scaleY (Y-Skalierung) scaleY(Zahl)
Skalierung in Y-Richtung (vertikale Skalierung).
rotate (Rotation) rotate(Winkel im Winkelmaß)
Drehung um den Winkel.
Bild zu transform: Element transformieren (2D)
skew (Schräge) skew(maximal zwei Winkel im Winkelmaß)
Schräge. Der erste Winkel gibt die X- bzw. horizontale Schräge an, der zweite die Y- bzw. vertikale Schräge.
Bild zu transform: Element transformieren (2D)
skewX (X-Schräge) skewX(Winkel im Winkelmaß)
Schräge in X-Richtung (horizontale Schräge).
skewY (Y-Schräge skewY(Winkel im Winkelmaß)
Schräge in Y-Richtung (vertikale Schräge).

Beispiel

 
css
1
2
3
DIV.transformation {
      transform: skew(30deg,45deg);
}

Die Box besitzt eine 30° Schräge in der Horizontalen und eine 45° Schräge in der Vertikalen.

weiterführende Artikel

transform: Element transformieren (3D)


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "transform: Element transformieren (2D)" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "transform: Element transformieren (2D)" hier bearbeiten.

Mitarbeiter