transform-origin
transform-origin
This page has been flagged with the following issues:
High-level issues:
Summary
This property allows you to define the origin of the transformation axes relative to the element on which the transformation is applied.
Overview table
| Initial value | 50% 50% 0
|
|---|---|
| Applies to | transformable elements |
| Inherited | No |
| Media | visual |
| 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. |
| Animatable | Yes |
| CSS Object Model Property | |
Syntax
-
transform-origin: length -
transform-origin: percentage -
transform-origin: named-position
Values
- 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).
For more information about the supported length units,
see CSS Values and Units.
- 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.
- 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.
Needs Examples: This section should include examples.
Notes
Remarks
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).
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%.
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 transform-origin-z.
Standards information
- CSS Transforms Module, Level 3, Section 8
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 2.0 -webkit |
16.0 3.5 -moz |
10.0 9.0 -ms |
12.10 10.5 -o |
3.1 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? | ? | ? | ? |
See also
Related articles
Transforms
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]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here