Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).

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

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

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

Initial value50% 50% 0
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc
Canonical orderOne or two values, with length made absolute and keywords translated to percentages

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes -webkit-

12

12 -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 ?109 No Yes
Support in SVG Yes ?

432

41 —?2 3

No Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung 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