transform-origin

Summary

The transform-origin property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Not explicitly set values are reset to their corresponding values.

Syntax

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3cm 2px;

/* y-offset x-offset-keyword */
transform-origin: 2px left;

/* 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;

/* y-offset x-offset-keyword z-offset */
transform-origin: 2px left 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;

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:

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

See Using CSS transforms for examples.

Live Examples

<div class="box1">&nbsp;</div>

.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
}

<div class="box2">&nbsp;</div>

.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box3">&nbsp;</div>

.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box4">&nbsp;</div>

.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box5">&nbsp;</div>

.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -10em -30em;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}

<div class="box6">&nbsp;</div>

.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
}

<div class="box7">&nbsp;</div>

.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
}

<div class="box8">&nbsp;</div>

.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
-webkit-transform: scale(1.9);
-moz-transform: scale(1.9);
-o-transform: scale(1.9);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-transform-origin: 100% -30%;
}

<div class="box9">&nbsp;</div>

.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
trasnform-origin: 100% -30%;
-webkit-transform: skewX(50deg);
-moz-transform: skewX(50deg);
-o-transform: skewX(50deg);
}

<div class="box10">&nbsp;</div>

.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
-webkit-transform: skewY(50deg);
-moz-transform: skewY(50deg);
-o-transform: skewY(50deg);
transform-origin: 100% -30%;
-webkit-transform-origin: 100% -30%;
-moz-transform-origin: 100% -30%;
-o-transform-origin: 100% -30%;
}

Specifications

Browser compatibility

[1] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.

[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] See MSDN transform-origin documentation.

[4] Percentage handling for transform-origin values for SVG elements was behind the preference svg.transform-origin.enabled, defaulting to false. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

[5] Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Chrome for Android	Internet Explorer Mobile	Opera Mobile
Basic Support	YesFull support Prefixed Implementation Notes Full supportYes Prefixed Prefixed Requires the vendor prefix: -webkit	16.0Full support Implementation Notes Full support16.0   Full support3.5 Prefixed Prefixed Requires the vendor prefix: -moz	10.0Full support Implementation Notes Full support10.0   Full support9.0 Prefixed Prefixed Requires the vendor prefix: -ms	12.10Full support Implementation Notes Full support12.10   Full support10.5 Prefixed Prefixed Requires the vendor prefix: -o	3.1Full support Prefixed Implementation Notes Full support3.1 Prefixed Prefixed Requires the vendor prefix: -webkit	?	11.0Full support Prefixed Implementation Notes Full support11.0 Prefixed Prefixed Requires the vendor prefix: -webkit	?
Three-value syntax	YesFull support Prefixed Implementation Notes Full supportYes Prefixed Prefixed Requires the vendor prefix: --webkit	16.0Full support Implementation Notes Full support16.0   Full support10.0 Prefixed Prefixed Requires the vendor prefix: --moz	10.0Full support	NoNo support	YesFull support Prefixed Implementation Notes Full supportYes Prefixed Prefixed Requires the vendor prefix: --webkit	?	?	NoNo support
Support in SVG	YesFull support	43.0Full support Implementation Notes Full support43.0   Full support41.0 Notes Notes In Gecko 41.0 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) percentage handling for transform-origin values for SVG elements was behind the preference svg.transform-origin.enabled, defaulting to false. This preference got removed and the feature enabled by default in Gecko 43.0 (Firefox 43.0 / Thunderbird 43.0 / SeaMonkey 2.40). While support for this property was added to SVG in Gecko 41.0, keywords and percentages currently refer to the canvas instead of the object itself. See bug 1209853.	NoNo support	YesFull support	?	43.0Full support Implementation Notes Full support43.0   Full support41.0 Notes Notes In Gecko 41.0 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38) percentage handling for transform-origin values for SVG elements was behind the preference svg.transform-origin.enabled, defaulting to false. This preference got removed and the feature enabled by default in Gecko 43.0 (Firefox 43.0 / Thunderbird 43.0 / SeaMonkey 2.40). While support for this property was added to SVG in Gecko 41.0, keywords and percentages currently refer to the canvas instead of the object itself. See bug 1209853.	?	?

Legend

Full support 

Full support

No support 

No support

Prefixed

Requires a vendor prefix or different name for use.

Notes

See implementation notes

See also

• Using CSS Transforms