คุณสมบัติ style transformStyle ของ HTML DOM

คุณสมบัติ style transformStyle ของ HTML DOM จะคืนค่าและใช้การแปลงรูปแบบ 2D หรือ 3D กับองค์ประกอบในเอกสาร HTML

รูปแบบการใช้งาน (Syntax)

การคืนค่า transformStyle:

object.style.transformStyle

การปรับเปลี่ยน transformStyle:

object.style.transformStyle = “value”

ค่าที่เป็นไปได้

ที่นี่ value สามารถเป็นได้ดังนี้

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้งานคุณสมบัติ HTML DOM style transformStyle

<!DOCTYPE html> <html> <head> <style>    body {       background: lightgreen;       height: 100vh;       text-align: center;    }    .outer-box {       position: relative;       height: 200px;       width: 200px;       margin: 80px;       padding: 5px;       border: 2px solid black;    }    .inner-box1 {       padding: 50px;       position: absolute;       background-color: coral;       transform: rotateY(40deg);    }    .inner-box2 {       padding: 40px;       position: absolute;       background-color: lightblue;       transform: rotateY(60deg);    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;       display: block;       color: #fff;       outline: none;       cursor: pointer;       margin: 1rem auto;    } </style> </head> <body> <h1>ตัวอย่างคุณสมบัติ DOM Style transformStyle</h1> <div class="outer-box">กล่องภายนอก <div class="inner-box1">กล่องภายใน 1 <div class="inner-box2">กล่องภายใน 2</div> </div> </div> <button onclick="add()" class="btn">ตั้งค่า transformStyle</button> <script>    function add() {       document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";    } </script> </body> </html>

ผลลัพธ์

โค้ดด้านบนจะให้ผลลัพธ์ดังนี้

คลิกที่ปุ่ม "ตั้งค่า transformStyle" เพื่อใช้ transform style บน Inner Box 1