คุณสมบัติการแปลงรูปแบบ HTML DOM ส่งคืนและใช้การแปลง 2D หรือ 3D กับองค์ประกอบในเอกสาร HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
-
กลับกลายร่าง
object.style.transform
-
การปรับเปลี่ยนการแปลงร่าง
object.style.transform = “value”
คุณค่า
ในที่นี้ ค่าสามารถเป็น −
ค่า | คำอธิบาย |
---|---|
สืบทอด | มันรับค่าคุณสมบัตินี้จากองค์ประกอบหลัก |
ค่าเริ่มต้น | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
ไม่มี | ไม่กำหนดการเปลี่ยนแปลง |
transform-function | อาจเป็นฟังก์ชันการแปลง 2D หรือ 3D ที่ถูกต้องก็ได้ |
แนวตั้ง | กำหนดความสูงขององค์ประกอบที่ปรับขนาดได้ |
ฟังก์ชัน
ฟังก์ชันการแปลง 2D หรือ 3D ที่ถูกต้องคือ -
Function | คำอธิบาย |
---|---|
เมทริกซ์(n,n,n,n,n,n) | ระบุการแปลง 2D โดยใช้เมทริกซ์ 6 ค่า |
matrix3d(n,n,n,n,ฯลฯ ...) | ระบุการแปลง 3 มิติโดยใช้เมทริกซ์ 16 ค่า |
แปล(x,y) | ระบุการแปลแบบ 2 มิติ |
translate3d(x,y,z) | ระบุการแปลแบบ 3 มิติ |
แปลX(x) | ระบุการแปลโดยใช้ค่าแกน X เท่านั้น |
แปลY(y) | ระบุการแปลโดยใช้ค่าแกน Y เท่านั้น |
แปลZ(z) | ระบุการแปลโดยใช้ค่าแกน Z เท่านั้น |
สเกล(x,y) | ระบุมาตราส่วน 2 มิติ |
สเกล3d(x,y,z) | ระบุมาตราส่วน 3 มิติ |
สเกลX(x) | ระบุมาตราส่วนโดยใช้ค่าแกน X เท่านั้น |
สเกลY(y) | ระบุมาตราส่วนโดยใช้ค่าแกน Y เท่านั้น |
สเกลZ(z) | ระบุมาตราส่วนโดยใช้ค่าแกน Z เท่านั้น |
หมุน(มุม) | ระบุการหมุน 2 มิติ |
หมุน3d(x,y,z) | ระบุการหมุน 3 มิติ |
หมุนX(x) | ระบุการหมุนโดยใช้ค่า X เท่านั้น |
หมุน Y(y) | ระบุการหมุนโดยใช้ค่าแกน Y เท่านั้น |
หมุน Z(z) | ระบุการหมุนโดยใช้ค่าแกน Z เท่านั้น |
เบ้(x,y) | ระบุความเอียง 2 มิติ |
เอียงX(x) | ระบุความเบ้โดยใช้ค่าแกน X เท่านั้น |
เอียงY(y) | ระบุความเบ้โดยใช้ค่าแกน Y เท่านั้น |
มุมมอง(n) | ระบุมุมมองเปอร์สเปคทีฟสำหรับการแปลง 3 มิติ |
ตัวอย่าง
ให้เราดูตัวอย่างของคุณสมบัติการแปลงรูปแบบ HTML DOM -
<!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 Property Example</h1> <div class="box"> </div> <button onclick="add()" class="btn">Set transform</button> <script> function add() { document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)"; } </script> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ “ตั้งค่าการแปลง ” เพื่อใช้การแปลง 2D บนกล่องสีแดง