transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die transform-origin CSS-Eigenschaft legt den Ursprung für die Transformationen eines Elements fest.

Probieren Sie es aus

Der Transformationsursprung ist der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Transformationsursprung der Funktion rotate() das Rotationszentrum.

Tatsächlich umschließt diese Eigenschaft eine Paarung von Verschiebungen um die anderen Transformationen eines Elements. Die erste Verschiebung bewegt den Transformationsursprung zur wahren Ursprungspunktsposition bei (0,0). Dann werden die anderen Transformationen angewendet und, da sich der Transformationsursprung bei (0,0) befindet, wirken diese Transformationen um diesen Transformationsursprung. Schließlich wird die entgegengesetzte Verschiebung angewendet, um den Transformationsursprung an seinen ursprünglichen Ort zurückzubringen. Folglich ergibt diese Definition

css
transform-origin: -100% 50%;
transform: rotate(45deg);

die gleiche Transformation wie

css
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Von rechts nach links gelesen, ist translate(100%, -50%) die Verschiebung, um den Transformationsursprung zum wahren Ursprung zu bewegen, rotate(45deg) ist die ursprüngliche Transformation und translate(-100%, 50%) ist die Verschiebung, um den Transformationsursprung an seinen ursprünglichen Ort zurückzubringen.

Standardmäßig liegt der Ursprung einer Transformation bei center.

Syntax

css
/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

Die Eigenschaft transform-origin kann mit einem, zwei oder drei Werten angegeben werden, wobei jeder Wert einen Versatz darstellt. Nicht explizit definierte Versätze werden auf ihre entsprechenden Anfangswerte zurückgesetzt.

Falls nur ein Wert als <length> oder <percentage> definiert wird, repräsentiert er den horizontalen Versatz.

Falls zwei oder mehr Werte definiert werden und kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort center ist, repräsentiert der erste Wert den horizontalen Versatz und der zweite den vertikalen Versatz.

  • Syntax mit einem Wert:

    • Der Wert muss ein <length>, ein <percentage> oder eines der Schlüsselwörter left, center, right, top und bottom sein.
  • Syntax mit zwei Werten:

    • Ein Wert muss ein <length>, ein <percentage> oder eines der Schlüsselwörter left, center und right sein.
    • Der andere Wert muss ein <length>, ein <percentage> oder eines der Schlüsselwörter top, center und bottom sein.
  • Syntax mit drei Werten:

    • Die ersten beiden Werte entsprechen der Syntax mit zwei Werten.
    • Der dritte Wert muss ein <length> sein. Er repräsentiert immer den Z-Versatz.

Werte

x-offset

Ist ein <length> oder ein <percentage>, der beschreibt, wie weit vom linken Rand der Box der Transformationsursprung gesetzt wird.

offset-keyword

Ist eines der Schlüsselwörter left, right, top, bottom oder center, das den entsprechenden Versatz beschreibt.

y-offset

Ist ein <length> oder ein <percentage>, der beschreibt, wie weit vom oberen Rand der Box der Transformationsursprung gesetzt wird.

x-offset-keyword

Ist eines der Schlüsselwörter left, right oder center, das beschreibt, wie weit vom linken Rand der Box der Transformationsursprung gesetzt wird.

y-offset-keyword

Ist eines der Schlüsselwörter top, bottom oder center, das beschreibt, wie weit vom oberen Rand der Box der Transformationsursprung gesetzt wird.

z-offset

Ist ein <length> (und niemals ein <percentage>, da dies die Anweisung ungültig machen würde), der beschreibt, wie weit vom Auge des Benutzers der z=0-Ursprung gesetzt ist.

Die Schlüsselwörter sind praktische Kurzformen und entsprechen den folgenden <percentage>-Werten:

Schlüsselwort Wert
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formale Definition

Anfangswert50% 50% 0
Anwendbar auftransformierbare Elemente
VererbtNein
Prozentwertebezieht sich auf die Größe der äußeren Box
Berechneter Wertfor <length> the absolute value, otherwise a percentage
Animationstypsimple list of length, percentage, or calc

Hinweis: Der Anfangswert von transform-origin ist 0 0 für alle SVG-Elemente außer den Wurzel-<svg>-Elementen und <svg>-Elementen, die ein direktes Kind eines foreignObject sind, deren transform-origin 50% 50% entspricht, wie bei anderen CSS-Elementen. Weitere Informationen finden Sie im Attribut SVG transform-origin.

Formale Syntax

transform-origin = 
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?

<length-percentage> =
<length> |
<percentage>

Beispiele

Eine Demonstration verschiedener Transformationswerte

Dieses Beispiel zeigt die Auswirkungen der Auswahl verschiedener transform-origin-Werte für eine Vielzahl von Transformationsfunktionen.

Spezifikationen

Specification
CSS Transforms Module Level 1
# transform-origin-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform-origin
bottom
center
left
right
On SVG elements
Three-value syntax
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch