CSS Reference Manual

CSS @rules (RULES)

Comprehensive CSS Properties

CSS3 transform-style attribute CSS3 transform attribute

CSS3 transform-Usage and examples of 'origin' attribute

transform-The 'origin' attribute allows you to change the position of the transformation element.

2D transformation elements can change the X and Y axes of the element. 3D transformation elements can also change the Z-axis of the element.　

The following table provides usage instructions and version history of this attribute, as well as its syntax in JavaScript scripts.

Default value:	50% 50% 0
Applies to:	Transformable elements
Inheritance:	None
Animatable:	It is.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.transformOrigin="20@%"

transform-The usage syntax of 'origin'

The syntax of this attribute is as follows:

transform-origin: x-position | y-position | z-position | initial | inherit

Note:If only 'transform' is provided-The 'origin' attribute specifies a value, assuming the second value is 'center', which is equal to50% value.

The following examples demonstrate how to use transform-origin attribute.

Example

img {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin:　25% bottom;
}

Test and see‹/›

Note:If at least one of the two values is not a keyword, the first value represents the horizontal position (or offset) of the transformation origin, and the second value represents the vertical position (or offset) of the transformation origin.

Attribute values

The following table describes the values of this attribute.

value	description
x-position	represents the horizontal position (or offset) of the transformation origin. It can have one of the following values: percentage -defines the offset relative to the element's width. length -defines the offset of the length value used. left -equals 0% or zero width. center -equals the width of the box50% or half. right -equals100% or the entire width of the box.
y-position	represents the vertical position (or offset) of the transformation origin. It can have one of the following values: percentage -defines the offset relative to the element's height. length -defines the offset of the length value used. top -equals 0% or zero height. center -equals the height of the box50% or half. bottom -equals100% or the entire height of the box.
z-position	alengthvalue, it describes how far the Z = 0 origin is from the user's eyes (for3D transformation). Percentage values are invalid.
initial	Set this property to its default value.
inherit	If specified, the associated element adopts its parent element's transform-origin attribute values.

Browser compatibility

transform-Browser compatibility of the origin attribute, the numbers in the following table indicate the minimum version number of the browser that supports this attribute; all mainstream browsers support this attribute.

	Firefox (2D)3.5 +,3D)10+ ^-moz-,16 + Chrome (2D)4 +,3D)12+ ^-webkit-,36 + Internet Explorer (2D)9 ^-ms-,10+ Apple Safari (2D)3.2 +,3D)4+ ^-webkit- Opera (2D)10.5+ -o 　 ^-, (2D)3D)15+ 　 ^-webkit-,23+

For further reading

Please refer to the following tutorial:CSS3 2D transformation,CSS3 3D transformation

CSS3 transform-style attribute CSS3 transform attribute