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