Web/CSS/transform-origin

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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:
- One value must be a <length>, a <percentage>, or one of the keywords left, center, and right.
- The other value must be a <length>, a <percentage>, or one of the keywords top, center, and bottom.
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;`	`<div class="box1"> </div>` `.box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; }`
`transform: rotate(30deg);`	`<div class="box2"> </div>` `.box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); }`
`transform: rotate(30deg); transform-origin: 0 0;`	`<div class="box3"> </div>` `.box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); }`
`transform: rotate(30deg); transform-origin: 100% 100%;`	`<div class="box4"> </div>` `.box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); }`
`transform: rotate(30deg); transform-origin: -1em -3em;`	`<div class="box5"> </div>` `.box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); }`
`transform: scale(1.7);`	`<div class="box6"> </div>` `.box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); }`
`transform: scale(1.7); transform-origin: 0 0;`	`<div class="box7"> </div>` `.box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 0 0; -webkit-transform-origin: 0 0; }`
`transform: scale(1.7); transform-origin: 100% -30%;`	`<div class="box8"> </div>` `.box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; }`
`transform: skewX(50deg); transform-origin: 100% -30%;`	`<div class="box9"> </div>` `.box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewX(50deg); -webkit-transform: skewX(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; }`
`transform: skewY(50deg); transform-origin: 100% -30%;`	`<div class="box10"> </div>` `.box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewY(50deg); -webkit-transform: skewY(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; }`

Specifications

Specification	Status	Comment
CSS Transforms Level 1The definition of 'transform-origin' in that specification.	Working Draft

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`transform-origin`	Chrome Full support 36 Full support 36 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 16 Full support 16 Full support 3.5 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	IE Full support 10 Full support 10 Full support 9 Prefixed' Prefixed' Implemented with the vendor prefix: -ms-	Opera Full support 23 Full support 23 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 15 Full support 10.5 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari Full support 9 Full support 9 Full support 2 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 37 Full support 37 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 36 Full support 36 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 16 Full support 16 Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz- Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 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.	Opera Android Full support 24 Full support 24 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 12.1 — 15 Full support 11 Prefixed' Prefixed' Implemented with the vendor prefix: -o-	Safari iOS Full support 9 Full support 9 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 3.0 Full support 3.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Support in SVG	Chrome Full support 19	Edge Full support 17	Firefox Full support 43 Notes' Full support 43 Notes' Notes' Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061. No support 41 — 43 Notes' Disabled' Notes' 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.	IE No support No	Opera Full support 15	Safari Full support 6 Notes' Full support 6 Notes' Notes' 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)" />`).	WebView Android Full support ≤37	Chrome Android Full support 25	Firefox Android Full support 43 Notes' Full support 43 Notes' Notes' Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061. No support 41 — 43 Notes' Disabled' Notes' 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.	Opera Android Full support 14	Safari iOS Full support 6 Notes' Full support 6 Notes' Notes' 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)" />`).	Samsung Internet Android Full support 1.5
Three-value syntax	Chrome Full support 12	Edge Full support 12	Firefox Full support 10	IE Full support 9	Opera Full support 15	Safari Full support 5	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 10	Opera Android Full support 14	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0

Legend

Full support: Full support
No support: No support
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.