Looking for css Keywords? Try Ask4Keywords

CSS2D-Transformationen


Syntax

  • Transformation drehen
  • umwandeln: drehen (<Winkel>)
  • Übersetzen Sie Transform
  • transform: übersetzen (<Länge oder Prozentsatz> [, <Länge oder Prozentsatz>]?)
  • transform: translateX (<länge oder prozentual>)
  • transform: translateY (<länge oder prozentual>)
  • Schiefe verwandeln
  • Transformation: Schräglauf (<Winkel> [, <Winkel>]?)
  • transform: skewX (<Winkel>)
  • transform: skewY (<angle>)
  • Scale Transform
  • Transformation: Maßstab (<Skalierungsfaktor> [, <Skalierungsfaktor>]?)
  • transform: scaleX (<Skalierungsfaktor>)
  • transform: scaleY (<scale-factor>)
  • Matrix-Transformation
  • transform: matrix (<number> [, <number>] {5,5})

Parameter

Funktion / Parameter Einzelheiten
rotate(x) Definiert eine Transformation, mit der das Element um einen festen Punkt auf der Z-Achse verschoben wird
translate(x,y) Verschiebt die Position des Elements auf der X- und Y-Achse
translateX(x) Verschiebt die Position des Elements auf der X-Achse
translateY(y) Verschiebt die Position des Elements auf der Y-Achse
scale(x,y) Ändert die Größe des Elements auf der X- und Y-Achse
scaleX(x) Ändert die Größe des Elements auf der X-Achse
scaleY(y) Ändert die Größe des Elements auf der Y-Achse
skew(x,y) Scherabbildung oder Transvektion, die jeden Punkt eines Elements um einen bestimmten Winkel in jede Richtung verzerrt
skewX(x) Horizontale Scherabbildung, die jeden Punkt eines Elements um einen bestimmten Winkel in horizontaler Richtung verzerrt
skewY(y) Vertikale Scherabbildung, die jeden Punkt eines Elements um einen bestimmten Winkel in vertikaler Richtung verzerrt
matrix() Definiert eine 2D-Transformation in Form einer Transformationsmatrix.
Winkel Der Winkel, um den das Element gedreht oder geneigt werden soll (abhängig von der Funktion, mit der es verwendet wird). Der Winkel kann in Grad ( deg ), Gradian ( grad ), Radiant ( rad ) oder turn ( turn ) angegeben werden. In der Funktion skew() ist der zweite Winkel optional. Wenn nicht angegeben, gibt es keine (0) Schräglage in der Y-Achse.
Länge oder Prozentsatz Die als Länge oder Prozentsatz ausgedrückte Entfernung, um die das Element übersetzt werden soll. In der Funktion translate() ist der zweite Längen- oder Prozentsatz optional. Wenn nicht angegeben, gibt es keine 0-Verschiebung in der Y-Achse.
Skalierungsfaktor Eine Zahl, die definiert, wie oft das Element in der angegebenen Achse skaliert werden soll. Bei der Funktion scale() ist der zweite Skalierungsfaktor optional. Wenn nicht angegeben, wird der erste Skalierungsfaktor auch für die Y-Achse angewendet.

Bemerkungen

2D-Koordinatensystem

Transformationen werden nach einem 2D-X / Y-Koordinatensystem durchgeführt. Die X-Achse geht von rechts nach links und die Y-Achse geht nach unten, wie in der folgenden Abbildung dargestellt:

2D-CSS-Koordinatensystem

Ein positives translateY() geht also nach unten und ein positives translateX() geht richtig.

Browserunterstützung und Präfixe

  • IE unterstützt diese Eigenschaft seit IE9 mit dem Präfix -ms- . Ältere Versionen und Edge benötigen das Präfix nicht
  • Firefox unterstützt es seit Version 3.5 und benötigt bis Version 15 das Präfix -moz-
  • Chrome seit Version 4 und bis Version 34 benötigt das Präfix -webkit-
  • Safari benötigt das Präfix -webkit- bis Version 8
  • Opera benötigt das Präfix -o- für Version 11.5 und das Präfix -webkit- von Version 15 bis 22
  • Android benötigt das Präfix -webkit- von Version 2.1 bis 4.4.4

Beispiel für eine vorangestellte Transformation:

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

2D-Transformationen Verwandte Beispiele