ตัวอย่าง
ตั้งค่าการกำหนดฐานองค์ประกอบของ 3D:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการมุมมองแหล่งกำเนิดที่กำหนดองค์ประกอบ 3 มิติอยู่ในแกน X และแกน y คุณสมบัตินี้ช่วยให้คุณสามารถเปลี่ยนตำแหน่งด้านล่างขององค์ประกอบ 3D
เมื่อกำหนดคุณสมบัติมุมมองแหล่งกำเนิดสำหรับองค์ประกอบมันเป็นองค์ประกอบของเด็กที่อยู่ในตำแหน่งที่ไม่ใช่องค์ประกอบของตัวเอง
Note: คุณสมบัตินี้จะต้องใช้ร่วมกับ มุมมองของ ทรัพย์สินและมีผลเฉพาะกับ 3D เปลี่ยนองค์ประกอบ!
เพื่อทำความเข้าใจคุณสมบัติมุมมองต้นทาง ดูการสาธิต
ค่าเริ่มต้น: | 50% 50% |
---|---|
รับการถ่ายทอด: | no |
Animatable: | yes. Read about animatable Try it |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | object .style.perspectiveOrigin="10px 50%" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
คุณสมบัติ | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9.0 4.0.3 -webkit- | 23.0 15.0 -webkit- |
CSS ไวยากรณ์
perspective-origin:x-axis y-axis|initial|inherit;
ค่าทรัพย์สิน
มูลค่าทรัพย์สิน | ลักษณะ |
---|---|
x-axis | การกำหนดมุมมองที่ถูกวางไว้ที่แกน x ค่าที่เป็นไปได้:
ค่าเริ่มต้น: 50% |
y-axis | การกำหนดมุมมองที่ถูกวางไว้ที่แกน y ค่าที่เป็นไปได้:
ค่าเริ่มต้น: 50% |
แรกเริ่ม | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น |
สืบทอด | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS 3D แปลง
อ้างอิง HTML DOM: perspectiveOrigin property