Javascript Reference - HTML DOM Style transform Property
The transform property does a 2D or 3D transformation to an element.
In CSS we can use transform property to rotate, scale, move, skew, etc., elements.
We can do the same transformation through Javascript.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
transform |
Yes (WebkitTransform) | 10.0 | Yes | Yes (WebkitTransform) | Yes (WebkitTransform) |
Syntax
Return the transform property:
var v = 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) | Use a matrix of six values to create a 2D transformation, |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
use a 4x4 matrix to create a 3D transformation, |
| translate(x,y) | 2D translation |
| translate3d(x,y,z) | 3D translation |
| translateX(x) | translation in X-axis |
| translateY(y) | translation in Y-axis |
| translateZ(z) | 3D translation the Z-axis |
| scale(x,y) | 2D scale transformation |
| scale3d(x,y,z) | 3D scale transformation |
| scaleX(x) | scale transformation in X-axis |
| scaleY(y) | a scale transformation in Y-axis |
| scaleZ(z) | 3D scale transformation in Z-axis |
| rotate(angle) | 2D rotation by the angle |
| rotate3d(x,y,z,angle) | 3D rotation |
| rotateX(angle) | 3D rotation in X-axis |
| rotateY(angle) | 3D rotation in Y-axis |
| rotateZ(angle) | 3D rotation in Z-axis |
| skew(x-angle,y-angle) | 2D skew transformation in X-axis and Y-axis |
| skewX(angle) | 2D skew transformation in X-axis |
| skewY(angle) | 2D skew transformation in Y-axis |
| perspective(n) | Create perspective view for a 3D transformed |
| initial | Set to default value. |
| inherit | Inherit from parent element. |
Technical Details
| Default Value: | none |
|---|---|
| Return Value: | A string representing the transform property |
| CSS Version | CSS3 |
Example
The following code shows how to rotate a div element.
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!-- w ww . j a va 2 s.c om-->
margin: auto;
border: 1px solid black;
width: 200px;
height: 100px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">myDIV</div>
<script>
function myFunction() {
// Code for Chrome, Safari, Opera
document.getElementById("myDIV").style.WebkitTransform = "rotate(20deg)";
// Code for IE9
document.getElementById("myDIV").style.msTransform = "rotate(20deg)";
// Standard syntax
document.getElementById("myDIV").style.transform = "rotate(20deg)";
}
</script>
</body>
</html>
The code above is rendered as follows: