Style transform Property

Example

Rotate a div element:

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

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

Related Pages

CSS reference: transform property


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.