Latest web development tutorials
 

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

Internet Explorer Firefox Opera Google Chrome Safari

The transform property is supported in Internet Explorer 10 and Firefox.

Internet Explorer 9 supports an alternative, the msTransform property (2D transforms only).

Opera, Chrome and Safari support an alternative, the WebkitTransform property (3D and 2D transforms).


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,n,n,n,n,n,n,n,n,n,n,n,n)
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


< Style Object