Style transform property

Definition and Usage

transform This property applies 2D or 3D transformations to the element. It allows you to rotate, scale, move, skew, and more.

See also:

CSS Reference Manual:transform attribute

Example

Rotate the div element:

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

Try it yourself

Syntax

Return the transform attribute:

object.style.transform

Set the transform attribute:

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

Attribute value

Value Description
none Defines that no transformation should be applied.
matrix(n, n, n, n, n, n) Uses a matrix with six values to define a 2D transformation.
matrix3d(n, n, n, n, etc....) Uses a 4x4 matrix with 16 values to define a 3D transformation.
translate(x, y) Defines a 2D translation.
translate3d(x, y, z) Defines a 3D translation.
translateX(x) Defines a translation using only the X axis value.
translateY(y) Defines a translation using only the Y axis value.
translateZ(z) Defines a 3D translation using only the Z axis value.
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 to the X axis.
scaleY(y) Defines a scale transformation by giving a value to the Y axis.
scaleZ(z) Defines a 3D scale transformation by giving a value to the Z axis.
rotate(angle) Defines a 2D rotation with an angle specified in the parameters.
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 both the X and Y axes.
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 the perspective of the 3D transform element.
initial Sets this attribute to its default value. See also initial.
inherit Inherits this attribute from its parent element. See also inherit.

Technical details

Default value: None
Return value: A string that represents the element's transform attribute.
CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0