خاصية Transform Style
آخر تحديث: 2026-09-13
transform-style خاصية Transform Style
تقرر خاصية transform-style ما إذا كان أبناء العنصر يحتفظون بوضعهم ثلاثي الأبعاد في الفضاء. القيمة الافتراضية flat تُسطّح الأبناء في المستوى ثنائي الأبعاد للأصل؛ ومع preserve-3d يمكن وضع الأبناء في فضاء ثلاثي الأبعاد مستقل، وبالاقتران مع perspective تُبنى مشاهد ثلاثية الأبعاد حقيقية.
| الفئة | |
|---|---|
| القيمة الأولية | flat |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
transform-style: flat | preserve-3d;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
flat | preserve-3d | كلمة مفتاحية | ما إذا كان الأبناء يحتفظون بوضعهم ثلاثي الأبعاد |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-style | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
مهم： لا يُورث preserve-3d: يجب ضبطه صراحةً على الأصل الذي يجب أن يحتفظ بالفضاء ثلاثي الأبعاد، وعادةً ما يحتاج ذلك الأصل أيضاً إلى perspective لتظهر العمق.
تحذير： تفرض خصائص مثل overflow: hidden و opacity و filter سياقاً جديداً للتسطيح وقد تكسر التأثير ثلاثي الأبعاد لـ preserve-3d.
❓ الأسئلة الشائعة
Qمتى أحتاج إلى استخدام القيمة transform-style: preserve-3d؟
Aعندما يحتاج الأبناء إلى عمق حقيقي داخل الفضاء ثلاثي الأبعاد للأصل — مثل مكعب ثلاثي الأبعاد أو قلب بطاقة أو طبقات متراكمة. أما بالنسبة للتحويلات المستوية العادية مثل التدوير أو القياس أو النقل على مستوى واحد، فإن flat الافتراضي يكفي: فهو يسحق كل ابن في مستوى الأصل، لذا لا يظهر سوى تأثير ثنائي الأبعاد.
Qلماذا لا يزال لا يوجد تأثير ثلاثي الأبعاد رغم أنني ضبطت preserve-3d؟
Aالسبب الأكثر شيوعاً هو غياب perspective: دون perspective لا يوجد تقصير منظور ولا تظهر عمقاً للدوران. والسبب الثاني هو overflow: hidden أو opacity أقل من 1 أو filter على الأصل أو سلف — كل منها يُجبر الفضاء ثلاثي الأبعاد على التسطيح والعودة إلى مستوى. وعادةً ما يحل التحقق من هاتين النقطتين المشكلة.
Qما الفرق بين transform-style: preserve-3d و perspective؟
Aتعرّف perspective المسافة من المشاهد إلى المستوى z=0، مما يضبط قوة المنظور. يمكن الإعلان عنها على الأصل لتؤثر على جميع الأبناء ثلاثيي الأبعاد بالتساوي، أو استخدامها كدالة transform: perspective() على عنصر واحد. وتقرر transform-style: preserve-3d ما إذا كان الأبناء يحتفظون بوضعهم ثلاثي الأبعاد. وكلاهما مطلوب معاً لإنشاء مشاهد ثلاثية الأبعاد حقيقية.
Qما مدى دعم transform-style: preserve-3d في المتصفحات؟
Aتدعم جميع المتصفحات الحديثة preserve-3d، ولكن لـ Safari تاريخ من الدعم غير المتسق لتحويلات ثلاثية الأبعاد، وقد تُخفَّض بعض المجموعات بصمت إلى flat. إذا فشلت الثلاثية الأبعاد على Safari، طبّق التحويل ثلاثي الأبعاد مباشرة على الأبناء باستخدام دالة perspective()، وتجنب الاعتماد على سياق ثلاثي الأبعاد للأصل.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
