คุณสมบัติ transformOrigin ของ Style

คำอธิบายและวิธีใช้

transformOrigin คุณสมบัตินี้ยอมใช้เพื่อเปลี่ยนตำแหน่งขององค์ประกอบที่ได้ทวน

องค์ประกอบการแปลงทวน 2D สามารถเปลี่ยนตำแหน่งขององค์ประกอบทางแกนx และ y ได้ องค์ประกอบการแปลงทวน 3D ยังสามารถเปลี่ยนตำแหน่งขององค์ประกอบทางแกนz ได้

หมายเหตุ:คุณสมบัตินี้ต้องเป็นไปตาม คุณสมบัติ transform ใช้ร่วมกัน

ดูเพิ่มเติม:

เป้าหมาย JavaScript Style:คุณสมบัติ transform

คู่มือ CSS:คุณสมบัติ transform-origin

ตัวอย่าง

ตั้งตำแหน่งพื้นฐานของการหมุนองค์ประกอบ:

document.getElementById("myDIV").style.transformOrigin = "0 0";

ทดลองด้วยตัวเอง

รูปแบบ

คืนค่าคุณสมบัติ transformOrigin:

object.style.transformOrigin

ตั้งคุณสมบัติ transformOrigin:

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

ค่าของคุณสมบัติ

ค่า คำอธิบาย
x-axis

กำหนดตำแหน่งการจัดวางของตำแหน่งมุมทางแกนx ค่าที่เป็นไปได้:

  • left
  • center
  • right
  • length
  • %
y-axis

กำหนดตำแหน่งการจัดวางของตำแหน่งมุมทางแกนy ค่าที่เป็นไปได้:

  • top
  • center
  • bottom
  • length
  • %
z-axis

กำหนดตำแหน่งการจัดวางของตำแหน่งมุมทางแกนz ค่าที่เป็นไปได้:

  • length
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดดู initial.
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของเขา โปรดดู inherit.

รายละเอียดเทคนิค

ค่าเริ่มต้น: 50% 50% 0
ค่าที่คืนค่า: ตัวอักษรสาย，แสดงถึงตำแหน่งของ คุณสมบัติ transform-origin.
เวอร์ชั่น CSS: CSS3

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้ชี้ถึงเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ครบถ้วน

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0