Javascript DOM CSS Style transform Property

Introduction

Rotate a div element:

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

Click the button to rotate the DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*  w w  w  .j a  v a 2  s . c  o  m*/
  margin: auto;
  border: 1px solid black;
  width: 200px;
  height: 100px;
  background-color: coral;
  color: white;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>
function myFunction() {
  // Code for IE9
  document.getElementById("myDIV").style.msTransform = "rotate(20deg)";
  // Standard syntax
  document.getElementById("myDIV").style.transform = "rotate(20deg)";
}
</script>

</body>
</html>

The transform property applies a 2D or 3D transformation to an element.

This property allows you to rotate, scale, move, skew, etc., elements.

Property Values

Value	Description
none*	`Default`. No transformation
matrix(n, n, n, n, n, n)	2D transformation, using a matrix of six values
matrix3d(n, n, n, n, etc....)	3D transformation, using a 4x4 matrix of 16 values
translate(x, y)	2D translation
translate3d(x, y, z)	3D translation
`translateX(x)`	translation using only the value for the X-axis
`translateY(y)`	translation using only the value for the Y-axis
`translateZ(z)`	3D translation using only the value for the Z-axis
scale(x, y)	2D scale transformation
scale3d(x, y, z)	3D scale transformation
`scaleX(x)`	scale transformation by giving a value for the X-axis
`scaleY(y)`	scale transformation by giving a value for the Y-axis
`scaleZ(z)`	3D scale transformation by giving a value for the Z-axis
`rotate(angle)`	2D rotation, the angle is specified in the parameter
rotate3d(x, y, z, angle)	3D rotation
`rotateX(angle)`	3D rotation along the X-axis
`rotateY(angle)`	3D rotation along the Y-axis
`rotateZ(angle)`	3D rotation along the Z-axis
skew(x-angle, y-angle)	2D skew transformation along the X- and the Y-axis
`skewX(angle)`	2D skew transformation along the X-axis
`skewY(angle)`	2D skew transformation along the Y-axis
`perspective(n)`	perspective view for a 3D transformed element
`initial`	Sets this property to its default value.
`inherit`	Inherits this property from its parent element.

The transform property returns a String representing the transform property of an element.

Previous Next