คุณสมบัติ style transform ของ HTML DOM จะคืนค่าและใช้การแปลงรูปแบบ 2D หรือ 3D กับองค์ประกอบในเอกสาร HTML
รูปแบบการใช้งาน (Syntax)
การคืนค่า transform:
object.style.transform
การปรับเปลี่ยน transform:
object.style.transform = “value”
ค่าที่เป็นไปได้
ที่นี่ value สามารถเป็นได้ดังนี้
| ค่า | คำอธิบาย |
|---|---|
| inherit | สืบทอดค่าคุณสมบัตินี้จากองค์ประกอบพ่อ |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| none | ไม่ใช้การแปลงรูปแบบ |
| transform-function | สามารถเป็นฟังก์ชันแปลงรูปแบบ 2D หรือ 3D ที่ถูกต้องได้ |
| vertical | ตั้งค่าให้ความสูงขององค์ประกอบปรับขนาดได้ |
ฟังก์ชันการแปลงรูปแบบ
ฟังก์ชันการแปลงรูปแบบ 2D หรือ 3D ที่ถูกต้องมีดังนี้
| ฟังก์ชัน | คำอธิบาย |
|---|---|
| matrix(n,n,n,n,n,n) | ระบุการแปลงรูปแบบ 2D โดยใช้เมทริกซ์ 6 ค่า |
| matrix3d(n,n,n,n,etc ...) | ระบุการแปลงรูปแบบ 3D โดยใช้เมทริกซ์ 16 ค่า |
| translate(x,y) | ระบุการย้ายตำแหน่ง 2D |
| translate3d(x,y,z) | ระบุการย้ายตำแหน่ง 3D |
| translateX(x) | ระบุการย้ายตำแหน่งใช้ค่าแกน X เท่านั้น |
| translateY(y) | ระบุการย้ายตำแหน่งใช้ค่าแกน Y เท่านั้น |
| translateZ(z) | ระบุการย้ายตำแหน่งใช้ค่าแกน Z เท่านั้น |
| scale(x,y) | ระบุการปรับขนาด 2D |
| scale3d(x,y,z) | ระบุการปรับขนาด 3D |
| scaleX(x) | ระบุการปรับขนาดใช้ค่าแกน X เท่านั้น |
| scaleY(y) | ระบุการปรับขนาดใช้ค่าแกน Y เท่านั้น |
| scaleZ(z) | ระบุการปรับขนาดใช้ค่าแกน Z เท่านั้น |
| rotate(angle) | ระบุการหมุน 2D |
| rotate3d(x,y,z) | ระบุการหมุน 3D |
| rotateX(x) | ระบุการหมุนใช้ค่าแกน X เท่านั้น |
| rotateY(y) | ระบุการหมุนใช้ค่าแกน Y เท่านั้น |
| rotateZ(z) | ระบุการหมุนใช้ค่าแกน Z เท่านั้น |
| skew(x,y) | ระบุการเฉือน 2D |
| skewX(x) | ระบุการเฉือนใช้ค่าแกน X เท่านั้น |
| skewY(y) | ระบุการเฉือนใช้ค่าแกน Y เท่านั้น |
| perspective(n) | ระบุมุมมองมุมมองสำหรับการแปลงรูปแบบ 3D |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการใช้งานคุณสมบัติ HTML DOM style transform
<!DOCTYPE html> <html> <head> <style> body { color: #000; background: lightblue; height: 100vh; text-align: center; } .box { background: lightcoral; width: 200px; height: 200px; margin: 2rem auto; } .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 transform</h1> <div class="box"> </div> <button onclick="add()" class="btn">ตั้งค่า transform</button> <script> function add() { document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)"; } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้
คลิกที่ปุ่ม "ตั้งค่า transform" เพื่อใช้การแปลงรูปแบบ 2D บนกล่องสีแดง
