This page has been flagged with the following issues:
This property allows you to define the origin of the transformation axes relative to the element on which the transformation is applied.
|Initial value|| |
|Applies to||transformable elements|
|Computed value||The transformation origin is always calculated relative to the top-left corner of the transformed element. Named positions are converted to the equivalent percentage values. Percentage values are based on the relevant axis of the element's bounding box.|
|CSS Object Model Property|| |
- A floating-point number, followed by a unit of measurement.
Units of measurement may be absolute (
For more information about the supported length units,
see CSS Values and Units.
- 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 named position along the specified axis, each of which has a percentage equivalent.
right are valid for the x-axis and are equivalent to 0%, 50%, and 100% respectively. The values
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.
Needs Examples: This section should include examples.
The origin may be moved along all three axes with this single property by specifying the relative position of each axis in the following order:
x-axis y-axis z-axis. 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).
-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.
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
- If only one value is specified, the second value (y-axis) is assumed to be
The versions specified in the Compatibility Table indicate compatibility for 2-dimensional implementations of this property. To see compatibility for 3-dimensional implementations of this property, please refer to the Compatibility Table for
- CSS Transforms Module, Level 3, Section 8
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Feature||Android||BlackBerry||Chrome for mobile||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Opera Mini||Safari Mobile|
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]