transform-origin

< css‎ | properties
Jump to: navigation, search

transform-origin

This article is Ready to Use.


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
Percentages Refer to the size of the element's bounding box.

Syntax

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


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.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
prefix
?
Unknown
9.0
prefix
10.0
Yes
10.5
prefix
12.10
Yes
3.1
prefix
Three-value syntax
?
prefix
?
Unknown
10.0
Yes
?
none
?
prefix

Mobile

FeaturesAndroidChrome for AndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
Unknown
Three-value syntax
?
Unknown
?
Unknown
?
Unknown
?
Unknown
?
none
?
Unknown


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

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