ใช้คุณสมบัติ transformStyle ใน JavaScript เพื่อตั้งค่าวิธีการแสดงผลองค์ประกอบซ้อนกันในพื้นที่ 3D
ตัวอย่าง
คุณสามารถลองรันโค้ดต่อไปนี้เพื่อคืนค่าวิธีการแสดงผลองค์ประกอบซ้อนกันในพื้นที่ 3D ด้วย JavaScript −
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; margin: 10px; height: 200px; width: 200px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); } #div3 { padding: 50px; position: absolute; border: 2px solid BLUE; background-color: green; transform: rotateY(60deg); } #div4 { padding: 110px; position: absolute; border: 2px solid BLUE; background-color: red; transform: rotateY(60deg); } </style> </head> <body> <button onclick = "display()">Set</button> <div id = "div1"> DIV1 <div id = "div2"> DIV2 <div id = "div3"> DIV3 </div> <div id = "div4"> DIV4 </div> </div> </div> <script> function display() { document.getElementById("div2").style.transformStyle = "preserve-3d"; } </script> </body> </html> 