CSS Reference Manual

CSS @rules

Complete List of CSS Attributes

CSS3 transform-origin Attribute CSS top Attribute

CSS3 transform attribute usage and example

The transform CSS property is applied to the2D or32D or 3D space. This property allows you to rotate, scale, move, skew, translate, rotate, scale, and more for elements in two-dimensional or three-dimensional space.

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

Default value:	none
Applicable to:	Transformable elements
Inheritance:	No
Animated:	Yes.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.transform="rotate(7deg)

transform usage syntax

The syntax of this attribute is as follows:

transform:　[　transform-function　]　1　or more values | none | initial | inherit

The following example demonstrates how to use the transform attribute.

Example

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}

Test see‹/›

Attribute value

The following table describes the values of this attribute.

Value	Description
translate(tx,ty)	Move the element by a given amount along the X and Y axes.
translate3d(tx,ty,tz)	Move the element by a given amount along the X, Y, and Z axes.
translateX(tx)	Move the element by a given amount along the X axis.
translateY(ty)	Move the element by a given amount along the Y axis.
translateZ(tz)	Move the element by a given amount along the Z axis.
rotate(a)	Based on transform-The origin attribute defines the rotation of the element around its origin by a specified angle.
rotate3d(x,y,z, a)	Rotate the element around the [x, y, z] directional vector by the angle specified in the last parameter.3Element in D space.
rotateX(a)	Rotate the element around the X-axis by the given angle.
rotateY(a)	Rotate the element around the Y-axis by the given angle.
rotateZ(a)	Rotate the element around the Z-axis by the given angle.
scale(sx,sy)	Scale the width and height of the element up or down by the specified amount. The scale function1,1) is invalid.
scale3d(sx,sy,sz)	Scale the element along the X, Y, and Z axes by the specified amount. The scale function3d(1,1,1) is invalid.
scaleX(sx)	Scale the element along the X-axis.
scaleY(sy)	Scale the element along the Y-axis.
scaleZ(sz)	Scale the element along the Z-axis.
skew(ax,ay)	Tilt the element along the X and Y axes by the given angle.
skewX(ax)	Tilt the element along the X-axis by the given angle.
skewY(ay)	Tilt the element along the Y-axis by the given angle.
matrix(n,n,n,n,n,n)	specified in the form of a transformation matrix with six values2D Transformation.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	with16of the4×4Specify in the form of a transformation matrix.3D Transformation.
perspective(length)	Definition3Perspective of the D transformation element. Generally, as the value of this function increases, the element will appear further away from the viewer.
none	Specify that no transformation is applied.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements will adopt the attribute value of the parent element's transform.

Browser Compatibility

Browser compatibility of the transform attribute, the numbers in the following table represent 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-origin Attribute CSS top Attribute