Style transform Property
Style ObjectExamples
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, or skew an element.
Browser Support
Internet Explorer 10 and Firefox support the transform property.
Internet Explorer 9 supports an alternative property to this property, namely the msTransform property (only for 2D transformations).
Opera, Chrome, and Safari support an alternative property to this property, namely the WebkitTransform property (usable for 3D and 2D transformations).
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 no transformation. |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a six-value matrix. |
| 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 transformation. |
| translate3d(x,y,z) | Defines a 3D transformation. |
| translateX(x) | Defines a transformation, using only the X-axis value. |
| translateY(y) | Defines a transformation, using only the Y-axis value. |
| translateZ(z) | Defines a 3D transformation, 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 setting the X-axis value. |
| scaleY(y) | Defines a scale transformation by setting the Y-axis value. |
| scaleZ(z) | Defines a 3D scale transformation by setting the Z-axis value. |
| rotate(angle) | Defines a 2D rotation, specifying the angle 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 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 a perspective view for 3D transformation elements. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default value: | none |
|---|---|
| Return value: | A string, representing the element's transform property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:transform property
Other extensions