CSS transform-origin Property

The CSS transform-origin property is used to specify the position of the origin or pivot point of transformation of an element. This point will stay fixed at its location. For example, rotating an element with its top-left corner as origin will produce different effect than rotating an element with its center as origin.

The initial value of CSS transform-origin property is 50% 50% 0. You can only apply it to transformable elements. This property is not inheritable. The final computed value of this property is the absolute value for <length>, otherwise it is a percentage This property is animatable as a simple list of , a length, percentage or calc().

One important thing that you should keep in mind while settng transform-origin is that the value of z-offset can never be set in percentage. Using a percentage to set the z-offset will make the statement invalid.

Syntax

This is the formal syntax for using transform-origin property.

transform-origin: [ left | center | right | top | bottom | <percentage> | <length> ]  |     [ left | center | right | <percentage> | <length> ]    [ top | center | bottom | <percentage> | <length> ] <length>?  |    [ center | [ left | right ] ] && [ center | [ top | bottom ] ] <length>?

Here are some examples of using this property.

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

Acceptable Values

<percentage>

In this case, a percentage is used to resolve the origin value. The value of a percentage for the horizontal offset (first value) is determined relative to the width of the border box. The value of a percentage for the vertical offset (second value) is determined relative to height of the border box. The offset value are calculated from the top left corner of the border box.

<length>

In this case, a length is used to resolve the origin value. A length value provides a fixed length as the offset. The offset values are calculated relative to the top left corner of the bounding box.

top

This value computes to a ‘0%’ offset for the vertical position.

This value computes to a ‘100%’ offset for the horizontal position.

bottom

This value computes to a ‘100%’ offset for the vertical position.

left

This value computes to a ‘0%’ offset for the horizontal position.

center

This value computes to ‘50%’ (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (top 50%) for the vertical position if it is.

Working Examples

See the Pen VpryBQ by Tutorialio (@tutorialio) on CodePen.

Browser Support

The transform-origin property is supported in Chrome (prefixed -webkit-), Firefox, Safari (-wekit-), Opera 10.5+ prefixed with -o- and unprefixed starting version 12.10, Internet Explorer 9 prefixed with -ms- and unprefixed starting from version 10, and on Android and iOS.

The three-value syntax is not supported in Opera. The support for SVG transforms was added in Firefox in version 41. IE doesn’t support SVG transforms as well.

Further Reading

  1. Read more about the CSS <transform-origin> property on MDN.
  2. You can also read the CSS <transform-origin> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top