خاصية منظور CSS
مثال
امنح عنصرًا ثلاثي الأبعاد بعض المنظور:
#div1
{
perspective: 100px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تُستخدم perspective
الخاصية لإعطاء عنصر ثلاثي الأبعاد بعض المنظور.
تحدد الخاصية مدى perspective
بعد الكائن عن المستخدم. لذلك ، ستؤدي القيمة الأقل إلى تأثير ثلاثي الأبعاد أكثر كثافة من القيمة الأعلى.
عند تحديد perspective
خاصية عنصر ما ، فإن عناصر CHILD هي التي تحصل على عرض المنظور ، وليس العنصر نفسه.
تلميح: انظر أيضًا إلى خاصية أصل المنظور ، والتي تحدد الموضع الذي ينظر فيه المستخدم إلى الكائن ثلاثي الأبعاد.
لفهم خاصية المنظور بشكل أفضل ، قم بعرض العرض التوضيحي .
القيمة الافتراضية: | لا أحد |
---|---|
وارث: | رقم |
متحرك: | نعم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.perspective = "50px" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام المتبوعة بـ -webkit- أو -moz- الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
perspective | 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: length|none;
قيم الملكية
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
أنشئ مكعبًا وعيّن منظورات مختلفة:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
الصفحات ذات الصلة
برنامج CSS التعليمي: CSS 3D Transforms
مرجع DOM HTML: خاصية المنظور