transform-origin

Jump to: navigation, search

transform-origin

This page has been flagged with the following issues:

High-level issues:


W3C Working Draft

Summary

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

Syntax

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


Values

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

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

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


Examples

View live example

CSS

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

View live example

CSS

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

View live example

CSS

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

Notes

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

Compatibility

Desktop

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

Mobile

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

See also

Related pages (MSDN)

Attribution

This article contains content originally from external sources.

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