THE WORLD'S LARGEST WEB DEVELOPER SITE
×

# Style transform Property

❮ Style Object

### Example

Rotate a div element:

document.getElementById("myDIV").style.transform = "rotate(7deg)";
Try it Yourself »

## Definition and Usage

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
9.0 msTransform
16.0 Not supported
Use WebkitTransform
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