CSS/Eigenschaften/äußere Gestaltung/Transformationen/transform-origin

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft transform-origin können Sie ein Zentrum oder einen Dreh- und Angelpunkt für transform:rotate() festlegen, um den ein Element gedreht wird.

  • CSS 3.0
  • IE 10
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
aside {
   animation: orbit 4s linear infinite;	
}
	
#rotate2 aside {
  background: yellow;
  transform-origin: 0 0;
}
 
#rotate3 aside {
  background: lime;	
  transform-origin: center 100%;
}

Wenn ein Zentrum außerhalb des Elements liegt, rotiert dieses Element auf einer kreisförmigen Umlaufbahn um dieses Zentrum.

Folgende Angaben sind möglich:

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

Browser-Support[Bearbeiten]

Achtung!

Für ältere Browser-Versionen müssen Sie proprietäre Eigenschaften verwenden.

für Android -4.4.4 und Safari 6-8:

  • -webkit-transform-origin

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.