มุมมองสไตล์คุณสมบัติ แหล่งกำเนิด
ตัวอย่าง
ตั้งค่าตำแหน่งพื้นฐานขององค์ประกอบ 3 มิติ:
document.getElementById("myDIV").style.perspectiveOrigin = "10px 50%";
ความหมายและการใช้งาน
คุณสมบัติเปอร์สเปคทีฟออริจินกำหนดตำแหน่งที่องค์ประกอบ 3 มิติอิงตามแกน x และแกน y คุณสมบัตินี้ช่วยให้คุณเปลี่ยนตำแหน่งด้านล่างขององค์ประกอบ 3 มิติ
เมื่อกำหนดคุณสมบัติเปอร์สเปคทีฟออริจินสำหรับองค์ประกอบ จะเป็นองค์ประกอบ CHILD ที่อยู่ในตำแหน่ง ไม่ใช่ตัวองค์ประกอบเอง
หมายเหตุ:คุณสมบัตินี้ต้องใช้ร่วมกับ คุณสมบัติ เปอร์สเปคทีฟ และมีผลกับองค์ประกอบที่แปลงเป็น 3 มิติเท่านั้น!
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
perspectiveOrigin | 36.0 | 10.0 | 16.0 | 6.1 | 23.0 |
หมายเหตุ: Chrome, Safari และ Opera รุ่นเก่ารองรับคุณสมบัติ WebkitPerspectiveOrigin ทางเลือกอื่น
ไวยากรณ์
ส่งคืนคุณสมบัติเปอร์สเปคทีฟOrigin:
object.style.perspectiveOrigin
ตั้งค่าคุณสมบัติเปอร์สเปคทีฟOrigin:
object.style.perspectiveOrigin = "x-axis y-axis|initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
รายละเอียดทางเทคนิค
ค่าเริ่มต้น: | 50% 50% |
---|---|
คืนมูลค่า: | สตริง แทนคุณสมบัติเปอร์สเปคทีฟ-ต้นทางขององค์ประกอบ |
เวอร์ชัน CSS | CSS3 |
หน้าที่เกี่ยวข้อง
JavaScript Style Object: คุณสมบัติเปอร์สเปคทีฟ
การอ้างอิง CSS: คุณสมบัติแหล่งกำเนิดเปอร์สเปคทีฟ
❮ สไตล์วัตถุ