خاصية Perspective Origin
آخر تحديث: 2026-09-13
perspective-origin خاصية Perspective Origin
تُعرّف خاصية perspective-origin موضع المشاهد للمنظور ثلاثي الأبعاد — أي المكان الذي يُسقط فيه نقطة التلاشي على العنصر. الافتراضي هو مركز العنصر (50% 50%). يؤدي تعديلها إلى تغيير الزاوية التي تُرى منها المشهد ثلاثي الأبعاد — من الأعلى أو من الجانب وما إلى ذلك — وتعمل معاً مع perspective.
| الفئة | |
|---|---|
| القيمة الأولية | 50% 50% |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
perspective-origin: [<length-percentage> | left | center | right] [<length-percentage> | top | center | bottom];⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<length> | <percentage> | النوع | إحداثيات أصل المنظور |
left | center | right | top | bottom | كلمة مفتاحية | موضع مُعرّف مسبقاً |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| perspective-origin | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： النِّسب المئوية نسبة إلى العنصر الذي يُطبَّق عليه المنظور؛ والكلمات المفتاحية left/right/top/bottom أكثر بداهة.
تلميح： لا يؤثر تغيير perspective-origin على التحويلات ثنائية الأبعاد — يظهر الفرق فقط في التحويلات ثلاثية الأبعاد مثل rotateX/Y و translateZ.
❓ الأسئلة الشائعة
Qما الفرق بين perspective-origin و transform-origin؟
Aتُضبط perspective-origin على العنصر الأب الذي يحمل المنظور وتُعرّف المكان الذي يُسقط فيه نقطة تلاشي المشاهد على المشهد، مما يؤثر في الاتجاه المشترك لمنظور جميع الأبناء ثلاثيي الأبعاد. أما transform-origin فتُضبط على عنصر واحد وتُعرّف نقطة المرجع لتحويلات ذلك العنصر. الأولى تتحكم في من أين تنظر؛ والثانية تتحكم في ما يدور أو يتكبّر حوله العنصر.
Qكيف أجعل العنصر يبدو وكأنه يُرى من الأسفل في 3D؟
Aضع نقطة الرؤية أسفل العنصر: perspective-origin: 50% 100% تضع نقطة التلاشي في المركز السفلي للحاوية، فينظر المشاهد إلى الأعلى ويظهر العنصر بزاوية منخفضة. وبالمثل، 0% 50% من اليسار، و 100% 50% من اليمين، و 50% 0% من الأعلى. ادمج ذلك مع زاوية الدوران للحصول على زاوية الرؤية التي تريدها.
Qبِمَ تتعلّق قيم النِّسب المئوية في perspective-origin في CSS؟
Aهي نسبة إلى أبعاد العنصر الأب الذي يحمل المنظور. 0% 0% هو الزاوية العلوية اليسرى، و 100% 100% هو السفلية اليمنى، والافتراضي 50% 50% هو المركز. بالإضافة إلى النِّسب المئوية، يمكنك استخدام الكلمات المفتاحية left و center و right و top و bottom أو قيم الطول. لا تؤثر على التحويلات ثنائية الأبعاد — يظهر الفرق فقط في 3D.
Qلماذا لا أرى أي تغيير بعد تعديل perspective-origin؟
Aيؤثر perspective-origin فقط على التحويلات ثلاثية الأبعاد التي لها منظور. إذا لم يكن للعناصر الفرعية تحويلات ثلاثية الأبعاد مثل rotateX/Y أو translateZ، أو لم يكن للعنصر الأب أي منظور، فإن تحريك نقطة التلاشي لا يُنتج أي فرق بصري. أيضاً، عندما تكون مسافة المنظور كبيرة جداً، تصبح الفروق بين زوايا الرؤية شبه معدومة.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
