transform-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die transform-origin
CSS-Eigenschaft legt den Ursprung für die Transformationen eines Elements fest.
Probieren Sie es aus
Der Transformationsursprung ist der Punkt, um den eine Transformation angewendet wird. Zum Beispiel ist der Transformationsursprung der Funktion rotate()
das Rotationszentrum.
Tatsächlich umschließt diese Eigenschaft eine Paarung von Verschiebungen um die anderen Transformationen eines Elements. Die erste Verschiebung bewegt den Transformationsursprung zur wahren Ursprungspunktsposition bei . Dann werden die anderen Transformationen angewendet und, da sich der Transformationsursprung bei befindet, wirken diese Transformationen um diesen Transformationsursprung. Schließlich wird die entgegengesetzte Verschiebung angewendet, um den Transformationsursprung an seinen ursprünglichen Ort zurückzubringen. Folglich ergibt diese Definition
transform-origin: -100% 50%;
transform: rotate(45deg);
die gleiche Transformation wie
transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
Von rechts nach links gelesen, ist translate(100%, -50%)
die Verschiebung, um den Transformationsursprung zum wahren Ursprung zu bewegen, rotate(45deg)
ist die ursprüngliche Transformation und translate(-100%, 50%)
ist die Verschiebung, um den Transformationsursprung an seinen ursprünglichen Ort zurückzubringen.
Standardmäßig liegt der Ursprung einer Transformation bei center
.
Syntax
/* 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: revert;
transform-origin: revert-layer;
transform-origin: unset;
Die Eigenschaft transform-origin
kann mit einem, zwei oder drei Werten angegeben werden, wobei jeder Wert einen Versatz darstellt. Nicht explizit definierte Versätze werden auf ihre entsprechenden Anfangswerte zurückgesetzt.
Falls nur ein Wert als <length>
oder <percentage>
definiert wird, repräsentiert er den horizontalen Versatz.
Falls zwei oder mehr Werte definiert werden und kein Wert ein Schlüsselwort ist oder das einzige verwendete Schlüsselwort center
ist, repräsentiert der erste Wert den horizontalen Versatz und der zweite den vertikalen Versatz.
-
Syntax mit einem Wert:
- Der Wert muss ein
<length>
, ein<percentage>
oder eines der Schlüsselwörterleft
,center
,right
,top
undbottom
sein.
- Der Wert muss ein
-
Syntax mit zwei Werten:
- Ein Wert muss ein
<length>
, ein<percentage>
oder eines der Schlüsselwörterleft
,center
undright
sein. - Der andere Wert muss ein
<length>
, ein<percentage>
oder eines der Schlüsselwörtertop
,center
undbottom
sein.
- Ein Wert muss ein
-
Syntax mit drei Werten:
- Die ersten beiden Werte entsprechen der Syntax mit zwei Werten.
- Der dritte Wert muss ein
<length>
sein. Er repräsentiert immer den Z-Versatz.
Werte
- x-offset
-
Ist ein
<length>
oder ein<percentage>
, der beschreibt, wie weit vom linken Rand der Box der Transformationsursprung gesetzt wird. - offset-keyword
-
Ist eines der Schlüsselwörter
left
,right
,top
,bottom
odercenter
, das den entsprechenden Versatz beschreibt. - y-offset
-
Ist ein
<length>
oder ein<percentage>
, der beschreibt, wie weit vom oberen Rand der Box der Transformationsursprung gesetzt wird. - x-offset-keyword
-
Ist eines der Schlüsselwörter
left
,right
odercenter
, das beschreibt, wie weit vom linken Rand der Box der Transformationsursprung gesetzt wird. - y-offset-keyword
-
Ist eines der Schlüsselwörter
top
,bottom
odercenter
, das beschreibt, wie weit vom oberen Rand der Box der Transformationsursprung gesetzt wird. - z-offset
-
Ist ein
<length>
(und niemals ein<percentage>
, da dies die Anweisung ungültig machen würde), der beschreibt, wie weit vom Auge des Benutzers der z=0-Ursprung gesetzt ist.
Die Schlüsselwörter sind praktische Kurzformen und entsprechen den folgenden <percentage>
-Werten:
Schlüsselwort | Wert |
---|---|
left |
0% |
center |
50% |
right |
100% |
top |
0% |
bottom |
100% |
Formale Definition
Anfangswert | 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 |
Hinweis:
Der Anfangswert von transform-origin
ist 0 0
für alle SVG-Elemente außer den Wurzel-<svg>
-Elementen und <svg>
-Elementen, die ein direktes Kind eines foreignObject sind, deren transform-origin
50% 50%
entspricht, wie bei anderen CSS-Elementen. Weitere Informationen finden Sie im Attribut SVG transform-origin.
Formale Syntax
transform-origin =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? |
[ [ center | left | right ] && [ center | top | bottom ] ] <length>?
<length-percentage> =
<length> |
<percentage>
Beispiele
Eine Demonstration verschiedener Transformationswerte
Dieses Beispiel zeigt die Auswirkungen der Auswahl verschiedener transform-origin
-Werte für eine Vielzahl von Transformationsfunktionen.
Spezifikationen
Specification |
---|
CSS Transforms Module Level 1 # transform-origin-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-origin | ||||||||||||
bottom | ||||||||||||
center | ||||||||||||
left | ||||||||||||
right | ||||||||||||
On SVG elements | ||||||||||||
Three-value syntax | ||||||||||||
top |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.