Style transform Property

❮ Previous ❮ Style Object Reference Next ❯

Example

Rotate a div element:

document.getElementById("myDIV").style.transform = "rotate(7deg)";

Description

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
transform	36.0	10.0	16.0	9.0	23.0

Syntax

Return the transform property:

object.style.transform

Set the transform property:

object.style.transform = "none| transform-functions|initial|inherit"

Property Values

Value	Description
none	Defines that there should be no transformation
matrix(n, n, n, n, n, n)	Defines a 2D transformation, using a matrix of six values
matrix3d(n, n, n, n, etc....)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x, y)	Defines a 2D translation
translate3d(x, y, z)	Defines a 3D translation
translateX(x)	Defines a translation, using only the value for the X-axis
translateY(y)	Defines a translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale(x, y)	Defines a 2D scale transformation
scale3d(x, y, z)	Defines a 3D scale transformation
scaleX(x)	Defines a scale transformation by giving a value for the X-axis
scaleY(y)	Defines a scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x, y, z, angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
skew(x-angle, y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis
perspective(n)	Defines a perspective view for a 3D transformed element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	none
Return Value:	A String, representing the transform property of an element
CSS Version	CSS3

CSS reference: transform property