خاصية Perspective
آخر تحديث: 2026-09-13
perspective خاصية Perspective
تُعرّف خاصية perspective قوة المنظور في التحويلات ثلاثية الأبعاد — وهي المسافة من عين المشاهد إلى المستوى z=0. القيم الأصغر تُنتج تأثيراً أقوى (تباين أكثر إفراطاً بين القريب الكبير والبعيد الصغير)، بينما القيم الأكبر تجعل المنظور مسطّحاً. يجب ضبط هذه الخاصية على العنصر الأب للعنصر الذي يطبّق التحويل ثلاثي الأبعاد، وهي أساس المشاهد ثلاثية الأبعاد الواقعية.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
perspective: none | <length>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | كلمة مفتاحية | بدون منظور |
<length> | النوع | مسافة المنظور |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يجب ضبط perspective على العنصر الأب وتؤثر على جميع عناصره الفرعية التي تطبّق تحويلات ثلاثية الأبعاد. القيم بين 500px و 1500px تبدو عادة طبيعية.
مهم： none تعني بدون منظور (تعادل مسافة لانهائية)، لذا تُعرض التحويلات ثلاثية الأبعاد كإسقاط متعامد (orthographic) دون أي إحساس بالعمق.
❓ الأسئلة الشائعة
Qكيف ترتبط خاصيتا perspective و perspective-origin؟
Aتُعرّف perspective المسافة من المشاهد إلى المستوى z=0 وبالتالي قوة المنظور (مدى إفراط تباين القريب الكبير والبعيد الصغير). أما perspective-origin فتُعرّف المكان الذي يسقط فيه خط نظر المشاهد على الحاوية، مما يحدد الزاوية التي تُرى منها المشهد. كلتاهما معلمات ضرورية للعرض ثلاثي الأبعاد، وتُضبطان على نفس الحاوية الأب، وتحددان معاً كيف تظهر تحويلات الأبناء ثلاثية الأبعاد.
Qلماذا لا يوجد أي إحساس بالعمق رغم أنني ضبطت rotateY على عنصر؟
Aعادةً ما يكون العنصر الأب يفتقر إلى perspective، لذا يُعرض الدوران مسطّحاً. أو أن العنصر الأب لديه overflow: hidden أو opacity أقل من 1 أو filter، وكل منها يفرض سياقاً مسطّحاً يسحق الأبعاد الثلاثة. كبديل، يمكنك تطبيق المنظور مباشرة على العنصر عبر transform: perspective(800px) rotateY(45deg).
Qما قيمة المنظور المناسبة لاستخدامها في تحويلات CSS ثلاثية الأبعاد؟
Aالقيمة هي المسافة من المشاهد إلى العنصر: القيم الأصغر تعطي منظوراً أقوى وتشوّماً أكثر إفراطاً، بينما القيم الأكبر تقترب من الإسقاط المتعامد. للتأثيرات الصفحية المعتادة، تبدو القيم من 500px إلى 1500px طبيعية، وغالباً ما يُختار 800px إلى 1000px؛ وتعطي القيم من 200px إلى 400px مظهراً مفرطاً يشبه عين السمكة (fisheye). اضبطها بالتناسب مع حجم العنصر كي لا تتحرك الحواف كثيراً أثناء الدوران.
Qما الفرق بين خاصية perspective ودالة transform: perspective()؟
Aتُضبط خاصية perspective على العنصر الأب وتعطي جميع الأبناء ثلاثيي الأبعاد نفس نقطة الرؤية الواحدة، لذا يشارك عدة أبناء منظوراً واحداً. أما دالة perspective() فتُكتب ضمن transform الخاص بعنصر محدد، وتُطبَّق على ذلك العنصر فقط، وتعتمد تأثيراتها على موضعها في قائمة الدوال. يتطابق المنظور على مستوى الأب مع المشاهد الواقعية أكثر؛ أما صيغة الدالة فتناسب إعطاء عنصر واحد منظوره الخاص.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
