W3cubDocs

/CSS

transform-origin

The transform-origin CSS property sets the origin for an element's transformations.

The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate() function is the center of rotation.

This property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value.
This means, this definition

transform-origin: -100% 50%;
transform: rotate(45deg);

results in the same transformation as

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

By default, the origin of a transform is 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: unset;

The transform-origin property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset.

  • One-value syntax:
    • The value must be a <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom.
  • Two-value syntax:
  • Three-value syntax:
    • The first two values are the same as for the two-value syntax.
    • The third value must be a <length>. It always represents the Z offset.

Values

x-offset
Is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set.
offset-keyword
Is one of the left, right, top, bottom, or center keyword describing the corresponding offset.
y-offset
Is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set.
x-offset-keyword
Is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set.
y-offset-keyword
Is one of the top, bottom, or center keyword describing how far from the top edge of the box the origin of the transform is set.
z-offset
Is a <length> (and never a <percentage> which would make the statement invalid) describing how far from the user eye the z=0 origin is set.

The keywords are convenience shorthands and match the following <percentage> values:

Keyword Value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Formal definition

Initial value 50% 50% 0
Applies to transformable elements
Inherited no
Percentages refer to the size of bounding box
Computed value for <length> the absolute value, otherwise a percentage
Animation type simple list of length, percentage, or calc

Formal syntax

[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?

where
<length-percentage> = <length> | <percentage>

Examples

A demonstration of various transform values

Code Sample

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.7);

transform: scale(1.7);
transform-origin: 0 0;

transform: scale(1.7);
transform-origin: 100% -30%;

transform: skewX(50deg);
transform-origin: 100% -30%;

transform: skewY(50deg);
transform-origin: 100% -30%;

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
transform-origin 36
36
1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12
12
12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
3.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
10
10
9
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
23
23
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 15
10.5
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Support in SVG 19 17 43
43
Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
41 — 43
Disabled
Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 15 6
6
Only supported for transformations applied using the CSS transform property (e.g. .className { transform: rotate(45deg); transform-origin: center; }). It has no effect on transformations applied using the transform SVG attribute (e.g. <rect style="transform-origin: center;" transform="rotate(45)" />).
Three-value syntax 12 12 10 9 15 5
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
transform-origin 37
37
≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
36
36
18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
16
16
4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
44
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled 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.
24
24
15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
12.1 — 15
11
Prefixed
Prefixed Implemented with the vendor prefix: -o-
9
9
1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
3.0
3.0
1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Support in SVG ≤37 25 43
43
Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
41 — 43
Disabled
Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
Disabled From version 41 until version 43 (exclusive): this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
14 6
6
Only supported for transformations applied using the CSS transform property (e.g. .className { transform: rotate(45deg); transform-origin: center; }). It has no effect on transformations applied using the transform SVG attribute (e.g. <rect style="transform-origin: center;" transform="rotate(45)" />).
1.5
Three-value syntax ≤37 18 10 14 3.2 1.0

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin