The transformOrigin property allows you to change 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.
Note: This property must be used together with the transform property.
Syntax and Usage
Return the transformOrigin property: object.style.transformOrigin Set the transformOrigin property: object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"
Property Values
Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis. Possible values:
|
y-axis | Defining where the view is placed at the y-axis. Possible values:
|
z-axis | Defining where the view is placed at the z-axis (for 3D transforms). Possible values:
|
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |
Return Value: A String, representing the transform-origin property of an element
<style> #DIV1 { 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> <button onclick="move()">Try it</button> <div id="DIV1">DIV1 <div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div> </div> <script> function move() { // Code for IE9 document.getElementById("DIV2").style.msTransformOrigin = "0 0"; // Standard syntax document.getElementById("DIV2").style.transformOrigin = "0 0"; } </script>
<!DOCTYPE html> <html> <head> <title>Use Style TransformOrigin Properties In JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> h1{ color: red; } #DIV1 { 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(65deg); } #DIV2original { position: absolute; width: 150px; height: 150px; border: 1px dashed grey; background-color: lightgrey; opacity: 0.5; } </style> <body> <div class="container"> <br> <div class="text-center"> <h1>Style TransformOrigin Properties In JavaScript</h1> </div> <br> <h3>Change color of the four borders</h3> <div class="well"> <button class="btn btn-success" onclick="myFunction()">Move DIV2 </button> <div id="DIV1">DIV1 <div id="DIV2original">DIV2</div> <div id="DIV2">DIV2</div> </div> </div> </body> </html> <script> function myFunction() { // Code for IE9 document.getElementById("DIV2").style.msTransformOrigin = "0 0"; // Standard syntax document.getElementById("DIV2").style.transformOrigin = "0 0"; } </script>