How To Use Style TransformOrigin Properties In JavaScript

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

In Java script we can change position of div on click of button . so today we see how to move div position in this article using java script

How To Use Style TransformOrigin Properties In JavaScript

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:
  • left
  • center
  • right
  • length
  • %
y-axis Defining where the view is placed at the y-axis. Possible values:
  • top
  • center
  • bottom
  • length
  • %
z-axis Defining 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. 
 

Return Value:   A String, representing the transform-origin property of an element


Example(1)
<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>

In above example when you click button it will set the origin of the rotation to 0 for both the x-axis and the y-axis
The grey DIV element indicates where the DIV2 element would be without the transformation.


Complete code for Style TransformOrigin Properties In JavaScript
<!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>


 

Related Post