CSS transform-origin Eigenschaft

Die CSS-Eigenschaft transform-origin legt den Punkt fest, um den ein Element transformiert wird — den Drehpunkt für Rotationen, den Anker für Skalierungen und den Referenzpunkt für Schrägungen (Skewing).

Standardmäßig erfolgt jede Transformation um den Mittelpunkt des Elements (50% 50%). Dreht man eine Box, dreht sie sich um ihre eigene Mitte; skaliert man sie, wächst sie gleichmäßig in alle Richtungen. Mit transform-origin lässt sich dieser Drehpunkt an eine beliebige Stelle verschieben — zu einer Ecke, einer Kante oder sogar außerhalb der Box — sodass dieselbe Transformation eine völlig andere Bewegung erzeugt.

Diese Seite behandelt die Syntax, das Verhalten von Schlüsselwort-, Prozent- und Längenwerten, den optionalen Z-Achsen-Wert für 3D und ausführbare Beispiele.

Warum transform-origin wichtig ist

Eine Rotation sieht je nach Position des Drehpunkts sehr unterschiedlich aus. Stellen Sie sich einen Uhrzeiger vor: Dreht man ihn um seine Mitte, beschreibt er einen kleinen Kreis; dreht man ihn um seine Basis, streicht die Spitze über das gesamte Zifferblatt — dieselbe rotate()-Funktion, ein anderer Ursprung.

Deshalb ist transform-origin unverzichtbar für:

Scharnierförmige oder türähnliche Bewegungen — Rotation um eine Kante statt um die Mitte.
Skalierung aus einer Ecke — ein Menü wächst aus seiner oberen linken Ecke statt aus der Mitte heraus.
3D-Karten-Flips — in Kombination mit dem Z-Offset und perspective.

Die Eigenschaft transform-origin hat nur dann eine Wirkung, wenn über die Eigenschaft transform eine Transformationsfunktion angewendet wird — allein bewirkt sie nichts. Sie gehört zu den CSS3-Eigenschaften.

Syntax-Übersicht

Der Wert kann auf folgende Arten angegeben werden:

Offset-Schlüsselwörter — left, center, right, top, bottom (z. B. top left).
Längen — gemessen von der oberen linken Ecke des Elements (z. B. 0 0, 80px 40px).
Prozentwerte — relativ zur eigenen Größe des Elements (z. B. 0% 0% ist oben links, 100% 100% ist unten rechts).

Wird nur ein Wert angegeben, wird der zweite standardmäßig auf center gesetzt. Ein dritter Wert legt die Z-Achsen-Position fest und ist nur bei 3D-Transformationen relevant.

Info

Früher wurde das Präfix -webkit- für Safari, Chrome und ältere Opera-Versionen benötigt. Moderne Browser erfordern keine Vendor-Präfixe mehr für diese Eigenschaft.

Anfangswert	50% 50% 0
Gilt für	Transformierbare Elemente.
Vererbung	Nein.
Animierbar	Ja. Der Grad ist animierbar.
Version	CSS3
DOM-Syntax	Object.style.transform-origin = "10% 30%";

Syntax

CSS transform-origin Werte

transform-origin: x-offset y-offset z-offset | initial | inherit;

Beispiel der transform-origin-Eigenschaft:

CSS transform-origin Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Die kleine Box wird um 35° gedreht, aber da transform-origin auf 70% 90% (unterer rechter Bereich) gesetzt ist, dreht sie sich um diesen Punkt und nicht um ihre Mitte.

Das nächste Beispiel dreht vier identische Boxen um denselben Wert 25deg und ändert nur transform-origin, sodass Sie direkt vergleichen können, wie jeder Wert den Drehpunkt verschiebt.

Beispiel von transform-origin mit vier Werten:

CSS transform-origin weiteres Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

Probier es selbst »

Die vier Boxen im Überblick: 50% 50% dreht sich um die Mitte, top left dreht sich um die obere linke Ecke, 90% 120% verwendet einen Punkt unterhalb und rechts der Box, und 80px 40px misst den Drehpunkt in Pixeln von der oberen linken Ecke.

Der Z-Offset für 3D-Transformationen

Der dritte Wert verschiebt den Drehpunkt entlang der Z-Achse (zum Betrachter hin oder von ihm weg). Er hat nur einen sichtbaren Effekt bei 3D-Transformationsfunktionen wie rotateX() oder rotateY(), und er muss eine Länge sein — Prozentwerte sind für den Z-Wert nicht erlaubt.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Damit der 3D-Effekt sichtbar wird, benötigt das übergeordnete Element in der Regel einen perspective-Wert (und Sie können den Fluchtpunkt mit perspective-origin verschieben).

Werte

Wert	Beschreibung
`x-offset`	Legt die horizontale Position fest. Akzeptiert Schlüsselwörter (`left`, `center`, `right`), Längen oder Prozentwerte.
`y-offset`	Legt die vertikale Position fest. Akzeptiert Schlüsselwörter (`top`, `center`, `bottom`), Längen oder Prozentwerte.
`z-offset`	Legt die Tiefenposition entlang der Z-Achse für 3D-Transformationen fest. Akzeptiert Längenwerte.
`initial`	Setzt diese Eigenschaft auf ihren Standardwert zurück.
`inherit`	Erbt diese Eigenschaft vom übergeordneten Element.

Tipps und Fallstricke

Allein hat es keine Wirkung. Wenn transform-origin scheinbar keinen Effekt hat, prüfen Sie, ob das Element auch einen transform-Wert hat — ohne einen gibt es nichts, um das sich gedreht werden kann.
Prozentwerte sind relativ zum Element selbst, nicht zu seinem übergeordneten Element: 100% 0% ist die eigene obere rechte Ecke des Elements.
Die Reihenfolge ist x dann y, daher sind top left und left top gleichwertig (Schlüsselwörter sind reihenfolgeunabhängig), aber 0% 100% (unten links) und 100% 0% (oben rechts) nicht.
Animieren Sie Transformationen, nicht den Ursprung, für flüssige Bewegungen. Das Ändern von transform-origin mitten in einer Animation lässt das Element springen. Setzen Sie den Ursprung daher einmal fest und animieren Sie transition oder animation auf transform.

Übung

Die transform-origin-Eigenschaft funktioniert nur mit

animierbaren Elementen.transformierbaren Elementen.positionierten Elementen.