ใช้คุณสมบัติ transformOrigin ใน JavaScript เพื่อเปลี่ยนตำแหน่งขององค์ประกอบที่แปลงรูปแล้ว
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อคืนค่าตำแหน่งขององค์ประกอบที่แปลงรูปแล้วด้วย 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> 