CSS/Eigenschaften/transform-origin

Die Eigenschaft transform-origin legt ein Zentrum oder einen Dreh- und Angelpunkt für transform: rotate() fest, um den ein Element gedreht wird

Erlaubte Werte

• x-Achse: legt den Wert der Höhe fest
  • left
  • center
  • right
  • Wert: eine Längenangabe
• y-Achse: legt den Wert der Breite fest
  • top
  • center
  • bottom
  • Wert: eine Längenangabe
• z-Achse: legt den Wert der Tiefe (bei 3d-Objekten) fest
  • Wert: eine Längenangabe
• initial:
• inherit: Wert wird vom Elternelement übernommen

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

50% 50% 0

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

ja

Beispiel

#rotate3 div {
  background:lime;	
  transform-origin: center 100%;
}

 

Siehe auch

• Transform/Drehen, Kreisen und Pendeln
  • [Transform/Drehen, Kreisen und Pendeln#transform-origin

Weblinks

• Spezifikation (W3C): transform-origin property
• MDN: transform-origin
• Details: caniuse.com