خاصية Backface Visibility
آخر تحديث: 2026-09-13
backface-visibility خاصية Backface Visibility
تتحكم خاصية backface-visibility فيما إذا كان العنصر مرئياً عندما يواجه ظهره المشاهد بعد دوران ثلاثي الأبعاد. القيمة الافتراضية visible تعرض محتوى الوجه الأمامي منعكساً على الظهر؛ ومع hidden، يصبح العنصر غير مرئي عندما يواجه ظهره المشاهد. يُستخدم هذا عادةً في قلب البطاقات والمكعبات وغيرها من التأثيرات ثلاثية الأبعاد التي تُميّز بين الوجه والظهر.
| الفئة | |
|---|---|
| القيمة الأولية | visible |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
backface-visibility: visible | hidden;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
visible | hidden | كلمة مفتاحية | ما إذا كان الظهر مرئياً |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| backface-visibility | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
مهم： لا يسري مفعول backface-visibility إلا تحت تحويلات ثلاثية الأبعاد (transform-style: preserve-3d)؛ ولا تُظهر الدوران ثنائي الأبعاد أي ظهر.
تلميح： في قلب البطاقة، تحتاج كلا الوجهين إلى backface-visibility: hidden، ويُدوَّر الظهر مسبقاً عبر rotateY(180deg) ليكون في الخلف.
❓ الأسئلة الشائعة
Qلماذا أرى نصاً منعكساً بعد قلب عنصر باستخدام CSS؟
Aالافتراضي هو backface-visibility: visible، لذا عندما يواجه ظهر العنصر المشاهد، يُعرض المحتوى الأمامي منعكساً — مثل انعكاس شفاف. للحصول على قلب بطاقة صحيح، اضبط backface-visibility: hidden على كلا الوجهين وادُر الظهر مسبقاً عبر rotateY(180deg)؛ أثناء القلب يصبح الوجهان مرئيين بالتناوب.
Qهل تؤثر خاصية backface-visibility على أداء العرض؟
Aمع hidden، يمكن للمتصفح تخطّي عمل رسم الظهر غير المرئي، مما قد يحسّن فعلياً من أداء العرض في المشاهد ثلاثية الأبعاد — وهي ممارسة موصى بها. على النقيض، يبقي visible كلا الوجهين مرسومين طوال الوقت. في الحالات الحساسة للأداء مع بطاقات ثلاثية الأبعاد كثيرة، اضبط hidden بشكل موحد وتحكّم في الرؤية حسب الحاجة.
Qهل يعمل backface-visibility مع الدورانات ثنائية الأبعاد في تحويلات CSS؟
Aلا، لا معنى له هناك. الدوران ثنائي الأبعاد مثل rotate 45deg لا يقلب العنصر أبداً، لذا لا يواجه الظهر المشاهد ولا يبدأ مفعول backface-visibility. يهم فقط تحت التحويلات ثلاثية الأبعاد: عندما يُبعِد rotateY(180deg) أو rotateX(180deg) العنصر عن المشاهد، يخفي hidden الظهر.
Qكيف أبني تأثير قلب بطاقة ثلاثية الأبعاد باستخدام backface-visibility؟
Aأربع خطوات: اضبط transform-style: preserve-3d على الحاوية الأب؛ ضع الوجهين الأمامي والخلفي بشكل مطلق فوق بعضهما وامنح كليهما backface-visibility: hidden؛ ادُر الظهر مسبقاً عبر rotateY(180deg)؛ ثم أدِر الأب إلى rotateY(180deg) عند التفاعل. مع دمجها مع transition، تحصل على قلب سلس.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
