Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

รูปแบบ HTML DOM แปลงคุณสมบัติ


คุณสมบัติการแปลงรูปแบบ 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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

รูปแบบ HTML DOM แปลงคุณสมบัติ

คลิกที่ “ตั้งค่าการแปลง ” เพื่อใช้การแปลง 2D บนกล่องสีแดง

รูปแบบ HTML DOM แปลงคุณสมบัติ