หากต้องการตั้งค่าตำแหน่งด้านล่างขององค์ประกอบ 3D ให้ใช้คุณสมบัติ JavaScript perspectiveOrigin
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อตั้งค่าตำแหน่งด้านล่างขององค์ประกอบ 3D ด้วย JavaScript เรามี div สามตัวในโค้ด −
<!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%"; } </script> </body> </html> 