CSS perspective-origin รายละเอียด

การกำหนดและการใช้งาน

คุณสมบัติ perspective-origin กำหนดเส้นฐานขององค์ประกอบ 3D ในติดตายแบบยอดของ X และ Y และอนุญาตให้คุณเปลี่ยนตำแหน่งด้านล่างขององค์ประกอบ 3D。

เมื่อกำหนดคุณสมบัติ perspective-origin ให้กับองค์ประกอบ ลูกขององค์ประกอบจะได้รับปรากฎที่มีภาพมุมมอง แทนองค์ประกอบตัวเอง。

หมายเหตุ:คุณสมบัตินี้จำเป็นต้องใช้ร่วมกับ perspective ใช้ร่วมกับนิยายคุณสมบัติ และส่งผลเฉพาะองค์ประกอบการเปลี่ยนแปลง 3D เท่านั้น。

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

ตัวเรียน CSS3:CSS3 3D การเปลี่ยนที่ตัว

คู่มือเว็บ DOM HTML:ตัวแปร perspectiveOrigin

ตัวอย่าง

ตั้งค่าตำแหน่งจุดฐานขององค์ประกอบ 3D:

div
{
perspective:150;
perspective-origin: 10% 10%;
}

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

ระบบแสดงทางภาษา CSS

perspective-origin: x-axis y-axis;

ค่ารายละเอียดของนิยาย

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

กำหนดตำแหน่งของมุมมองในติดตายแบบยอดของ x-axis ค่าเริ่มต้น: 50%。

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

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

กำหนดตำแหน่งของมุมมองในติดตายแบบยอดของ y-axis ค่าเริ่มต้น: 50%。

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

  • top
  • center
  • bottom
  • length
  • %

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

ค่าเริ่มต้น: 50% 50%
การสืบทอด: no
เวอร์ชัน: CSS3
ระบบแสดงทางภาษา JavaScript: object.style.perspectiveOrigin="10% 10%"

การสนับสนุนเว็บเบราส์

ตัวเลขในตารางระบุสูตรรหัสแรกของเว็บเบราส์เคอร์ที่สนับสนุนคุณสมบัตินี้ทั้งหมด。

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-