जावास्क्रिप्ट के साथ ट्रांसफॉर्म्ड एलिमेंट्स की पोजिशन कैसे सेट करें?

ट्रांसफॉर्म्ड एलिमेंट्स की पोजिशन बदलने के लिए जावास्क्रिप्ट में transformOrigin प्रॉपर्टी का उपयोग करें।

उदाहरण

जावास्क्रिप्ट के साथ ट्रांसफॉर्म्ड एलिमेंट्स की पोजिशन वापस करने के लिए निम्न कोड चलाकर देखें:

<!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>डिव की प्रॉपर्टी बदलें</p>       <button onclick = "display()"> पर्सपेक्टिव ओरिजिन पोजिशन सेट करें </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>