Javascript DOM CSS Style transformOrigin Property

Introduction

Set a rotated element's base placement:

document.getElementById("myDIV").style.transformOrigin = "0 0";

Click the button to set the origin of the rotation to 0 for both the x-axis and the y-axis:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {/*from ww w . j  a v  a  2 s.  com*/
  height: 200px;
  width: 200px;
  margin: auto;
  border: 1px solid black;
}

#DIV2 {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: coral;
  -ms-transform: rotate(45deg); /* IE 9 */
  transform: rotate(45deg);
}

#DIV2original {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px dashed grey;
  background-color: lightgrey;
  opacity: 0.5;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="DIV1">DIV1
   <div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div>
</div>

<script>
function myFunction() {
  // Code for IE9
  document.getElementById("DIV2").style.msTransformOrigin = "0 0";
  // Standard syntax
  document.getElementById("DIV2").style.transformOrigin = "0 0";
}
</script>

</body>
</html>

The transformOrigin property sets the position on transformed elements.

2D transformed element can change the x- and y-axis of the element.

3D transformed element can also change the z-axis of the element.

This property must be used together with the transform property.

Property Values

Value	Description
x-axis	where the view is placed at the x-axis. Possible values: left center right length %
y-axis	where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	where the view is placed at the z-axis for 3D transforms. Possible values: length
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The transformOrigin property Default Value: 50% 50% 0

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

Previous Next