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.
Initialwert | 50% 50% 0 |
---|---|
Anwendbar auf | transformierbare Elemente |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Größe der äußeren Box |
Berechneter Wert | for length the absolute value, otherwise a percentage |
Animationstyp | simple 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örterleft
,center
, undright
angegeben werden.
- Der Wert muss als
- Syntax mit zwei Werten:
- Ein Wert muss eine Länge (
<length>
), ein Prozentwert (<percentage>
) oder eines der Schlüsselwörterleft
,center
, undright
sein. - Der andere Wert muss als eine Länge (
<length>
), ein Prozentwert(<percentage>
) oder eines der Schlüsselwörtertop
,center
, undbottom
sein.
- Ein Wert muss eine Länge (
- 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
, undcenter
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
, odercenter
beschreiben entsprechende Werte für die horizontale Transformation. - y-offset-keyword
- Die Schlüsselwörter
top
,bottom
, odercenter
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 |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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