How to set the position of transformed elements with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

Use the transformOrigin property in JavaScript to change the position of transformed elements.

Example

You can try to run the following code to return the position of transformed elements with JavaScript −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: auto;
            height: 200px;
            width: 200px;
            padding: 20px;
            border: 2px solid blue;
            perspective: 100px;
         }
         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: yellow;
            transform: rotateX(45deg);
         }
         #div3 {
            padding: 50px;
            position: absolute;
            border: 2px solid BLUE;
            background-color: green;
            transform: rotateX(30deg);
         }
      </style>
   </head>
   
   <body>
      <p>Change the property of div</p>
      <button onclick = "display()"> Set Perspective Origin Position </button>
      <div id = "div1"> DIV1
         <div id = "div2">DIV2</div>
         <div id = "div3">DIV3 </div>
      </div>
      <script>
         function display() {
            document.getElementById("div1").style.perspectiveOrigin = "20px 10%";
            document.getElementById("div2").style.transformOrigin = "0 0";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 12:46:33
Advertisements