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 a single <length> or <percentage> value is defined, it represents the horizontal offset.

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 value50% 50% 0
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc

The initial value of transform-origin is 0 0 for all SVG elements except for root <svg> elements and <svg> elements that are a direct child of a foreignObject, and whose transform-origin is 50% 50%, like other CSS elements. See the SVG transform-origin attribute for more information.

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

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

Browser compatibility

BCD tables only load in the browser

See also