W3cubDocs

/CSS

transform-origin

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

/* 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 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 negated value of the property, then applying the element's transform, then translating by the property value.)

Values that are not explicitly defined are reset to their corresponding defaults.

Initial value 50% 50% 0
Applies to transformable elements
Inherited no
Percentages refer to the size of bounding box
Media visual
Computed value for <length> the absolute value, otherwise a percentage
Animation type simple list of length, percentage, or calc
Canonical order One or two values, with length made absolute and keywords translated to percentages

Syntax

The transform-origin property may be specified using one, two, or three values.

  • One-value syntax:
  • Two-value syntax:
  • Three-value syntax:
    • The first two values are the same as for two-value syntax.
    • The third value must be a <length>.

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 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

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

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

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

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

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

Specifications

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

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes -webkit-

Yes

Yes -webkit-

16

3.5 -moz-

49 -webkit-

44 -webkit- 1

10

9 -ms-

12.1

10.5 -o-

3.1 -webkit-
Three-value syntax Yes ? 10 9 No Yes
Support in SVG Yes ?

432

41 —?2 3

 No Yes ?
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support ? ?

Yes

Yes -webkit-

16

4 -moz-

49 -webkit-

44 -webkit- 1

 ? ? ?
Three-value syntax ? ? ? ? No ? ?
Support in SVG ? ? ? ? ? ? ?

1. 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.

2. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.

3. From version 41: this feature is behind the svg.transform-origin.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Edit this page on MDN

© 2005–2018 Mozilla Developer Network 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