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.

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.

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>:

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

• CSS Transformationen verwenden