Jump to: navigation, search


This page has been flagged with the following issues:

High-level issues:

W3C Working Draft


This property defines the origin of the transformation axes relative to the element to which the transformation is applied.

Overview table

Initial value 50% 50%
Applies to Transformable elements.
Inherited No
Media visual
Computed value For <length>, the absolute value; otherwise a percentage.
Animatable Yes
CSS Object Model Property


  • transform-origin: percentage
  • transform-origin: length
  • transform-origin: <named-position>


A number, followed by a %.

The value is a percentage of the bounding box width (for the X axis) or the bounding box height (for the Y axis, if specified). A percentage cannot be applied to the Z axis.

A floating-point number, followed by a unit of measurement.

Units of measurement may be absolute (cm, mm, in, pt, or pc) or relative (em, ex, or px).

A named position along the specified axis, each of which has a percentage equivalent.

The values left, center, and right are valid for the X axis and are equivalent to 0%, 50%, and 100% respectively. The values top, center, and bottom are valid for the Y axis and are equivalent to 0%, 50%, and 100% respectively. There are no named positions along the Z axis.


View live example


/* 25% X offset, 50% Y offset, 0 Z offset */
#mytranselem {
    transform-origin: 25% 50%;

View live example


/* 20px X offset, 25px Y offset, 30px Z offset */
#mytranselem {
    transform-origin: 20px 25px 30px;

View live example


/* right X offset, center Y offset, 0 Z offset */
#mytranselem {
    transform-origin: right;


The origin may be moved along all three axes with this single property by specifying the relative position of each axis in X, Y, Z order. The grid complies with the right-hand rule for Cartesian coordinate systems. The x-axis increases from left to right; the y-axis increases from top to bottom; and the z-axis increases away from the user (higher z-values are more distant).

Microsoft deprecated -ms-transform-origin, the vendor-prefixed version of this property, with the release of Internet Explorer 10. It should only be included for compatibility with earlier versions.

If the transform-origin property is not set, the transform begins in the center at screen level (equal to a transform-origin value of 50% 50% 0).

  • If fewer than three values are provided, the third value (z-axis) is assumed to be 0 (screen level).
  • If only one value is specified, the second value (y-axis) is assumed to be 50%.

Related specifications

Specification Status Related Changes
CSS Transforms Module Level 3 W3C Working Draft



Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?


Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related pages (MSDN)


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article