Style transform Property
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 | 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
❮ Style Object
