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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung Ja
Mit Präfix
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Vollständige Unterstützung 12
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 3.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert 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.
IE Vollständige Unterstützung 10
Vollständige Unterstützung 10
Vollständige Unterstützung 9
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Opera Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Vollständige Unterstützung 10.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Safari Vollständige Unterstützung 3.1
Mit Präfix
Vollständige Unterstützung 3.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Vollständige Unterstützung Ja
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 16
Vollständige Unterstützung 16
Vollständige Unterstützung 4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Vollständige Unterstützung 49
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Vollständige Unterstützung 44
Mit Präfix Deaktiviert
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Deaktiviert 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.
Opera Android ? Safari iOS ? Samsung Internet Android ?
Three-value syntaxChrome Vollständige Unterstützung JaEdge ? Firefox Vollständige Unterstützung 10IE Vollständige Unterstützung 9Opera Keine Unterstützung NeinSafari Vollständige Unterstützung JaWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android Keine Unterstützung NeinSafari iOS ? Samsung Internet Android ?
Support in SVG
Experimentell
Chrome Vollständige Unterstützung JaEdge ? Firefox Vollständige Unterstützung 43
Hinweise
Vollständige Unterstützung 43
Hinweise
Hinweise Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Keine Unterstützung 41 — ?
Hinweise Deaktiviert
Hinweise Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Deaktiviert 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.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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