CSS transform-origin Eigenschaft

Kursempfehlung:

Definition und Verwendung

Die Eigenschaft transform-origin ermöglicht es Ihnen, den Position des transformierten Elements zu ändern.

2D-Transformationsobjekte können die x- und y-Achsen des Elements ändern. 3D-Transformationsobjekte können auch ihre Z-Achse ändern.Demonstration.

Um die Eigenschaft transform-origin besser zu verstehen, sehen Sie sich dieses anDemonstration.

Safari/Chrome-Nutzer: Um die Verwendung der Eigenschaft transform-origin bei 3D-Transformationen besser zu verstehen, sehen Sie sich dieses anKommentar: transform mit dieser Eigenschaft verwendet werden.

Um die Eigenschaft transform besser zu verstehen, sehen Sie sich dieses anDemonstration.

Weitere Informationen finden Sie unter:

CSS3-Tutorial:CSS3 2D Transformation

CSS3-Tutorial:CSS3 3D Transformation

HTML DOM Referenzhandbuch:transformOrigin-Eigenschaft

Beispiel

Setzen Sie den Ausgangspunkt der Rotationselemente:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Selbst ausprobieren

Am unteren Ende der Seite gibt es mehr Beispiele.

CSS-Syntax

transform-origin: x-axis y-axis z-axis;

Eigenschaftswert

Wert Beschreibung
x-axis

Definiert, wo die Ansicht im X-Achsenbereich positioniert wird. Mögliche Werte:

  • links
  • mitte
  • rechts
  • length
  • %
y-axis

Definiert, wo die Ansicht im Y-Achsenbereich positioniert wird. Mögliche Werte:

  • oben
  • mitte
  • unten
  • length
  • %
z-axis

Definiert, wo die Ansicht im Z-Achsenbereich positioniert wird. Mögliche Werte:

  • length

Technische Details

Standardwert: 50% 50% 0
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: objekt.style.transformOrigin="20% 40%"

Browserunterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Zahlen, die mit -webkit-, -moz- oder -ms- versehen sind, stellen die erste Version dar, die den Präfix verwendet.

Eigenschaft Chrome IE Firefox Safari Opera
transform-origin
(Zweiwertssyntax)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(Dreiwertssyntax)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-