transform-origin

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

/* 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: unset;

Der Ankerpunkt ist somit der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Ankerpunkt der Funktion rotate() der Rotationsmittelpunkt. (Diese Eigenschaft wird angewendet, indem zuerst das Element durch den negierten Wert der Eigenschaft verschoben wird, dann die Transformation des Elements angewendet wird und dann um den Eigenschaftswert zurück verschoben wird.)

Werte, die nicht explizit definiert sind, werden auf die entsprechenden Standardwerte zurückgesetzt.

Initialwert50% 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

Syntax

Die Eigenschaft transform-origin kann mit einem, zwei oder drei Werten angegeben werden.

  • Syntax mit einem Wert:
    • Der Wert muss als <length>, <percentage>, oder eines der Schlüsselwörter left, center, und right angegeben werden.
  • Syntax mit zwei Werten:
    • Ein Wert muss eine Länge (<length>), ein Prozentwert (<percentage>) oder eines der Schlüsselwörter left, center, und right sein.
    • Der andere Wert muss als eine Länge (<length>), ein Prozentwert(<percentage>) oder eines der Schlüsselwörter top, center, und bottom sein.
  • Syntax mit drei Werten:
    • Die ersten zwei Werte entsprechen der Syntax mit zwei Werten.
    • Der dritte Wert muss ein <length>-Wert sein. Er repräsentiert immer den Wert auf der Z-Achse.

Werte

x-offset
Ist als <length> oder <percentage> angegebener Versatz auf der X-Achse von der oberden linken Ecke.
offset-keyword
Die Schlüsselwörter left, right, top, bottom, und center beschreiben entsprechende Werte.
y-offset
Ist als <length> oder <percentage> angegebener Versatz auf der Y-Achse von der oberden linken Ecke.
x-offset-keyword
Die Schlüsselwörter left, right, oder center beschreiben entsprechende Werte für die horizontale Transformation.
y-offset-keyword
Die Schlüsselwörter top, bottom, oder center beschreiben entsprechende Werte für die vertikale Transformation.
z-offset
Als <length> (und nicht als <percentage>) beschreibt den Versatz auf der Z-Achse relativ zu 0.

Die Schlüsselwörte entschprechen folgenden Angaben in <percentage>:

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

Formal syntax

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

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

Beispiele

Quellcode Ausgabe

transform: none;

transform: rotate(30deg);

transform: rotate(30deg);
transform-origin: 0 0;

transform: rotate(30deg);
transform-origin: 100% 100%;

transform: rotate(30deg);
transform-origin: -1em -3em;

transform: scale(1.9);

transform: scale(1.9);
transform-origin: 0 0;

transform: scale(1.9);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

Spezifikation

Spezifikation Status Notiz
CSS Transforms Level 1
Die Definition von 'transform-origin' in dieser Spezifikation.
Arbeitsentwurf  

Browserunterstützung

BCD tables only load in the browser

Siehe auch