Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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
Medienvisuell
Berechneter Wertfor length the absolute value, otherwise a percentage
Animationstypsimple list of length, percentage, or calc
Kanonische ReihenfolgeEiner oder mehrere Werte, mit absolut gemachten Längen und Schlüsselwörtern zu Prozentwerten umgewandelt

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Grundlegende Unterstützung Ja -webkit-

12

12 -webkit-

16

3.5 -moz-

49 -webkit-

44 -webkit- 1

10

9 -ms-

12.1

10.5 -o-

3.1 -webkit-
Three-value syntax Ja ?109 Nein Ja
Support in SVG Ja ?

432

41 —?2 3

Nein Ja ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Grundlegende Unterstützung ? ?

Ja

Ja -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

? ? ?
Three-value syntax ? ? ? ? Nein ? ?
Support in SVG ? ? ? ? ? ? ?

1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

3. From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mack3457, spotbot2k
Zuletzt aktualisiert von: mack3457,