transform-origin property CSS Reference

---

Definition and Usage

The transform-origin CSS 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 explicitely set values are reset to their corresponding values.

• Initial 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
• Animatable yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
• Canonical order One or two values, with length made absolute and keywords translated to percentages

---

Syntax

Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?

transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom
transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right
transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset                          E.g.  transform-origin: bottom right 2cm

---

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

---

Examples

Live Examples

transform: none;
transform: rotate(30deg);
transform: rotate(30deg); transform-origin: 0 0;
transform: rotate(30deg); transform-origin: 100% 100%;
transform: rotate(30deg); transform-origin: -10em -30em;
transform: scale(1.9);
transform: scale(1.9); transform-origin: 0 0;
transform: scale(1.9); transform-origin: 100% -30%;
transform: skewX(50deg);
transform: skewY(50deg); transform-origin: 0 0;

---

Compatibility

Desktop browsers

Mobile browsers