94. تحويلات CSS ثلاثية الأبعاد (3D)

تسمح التحويلات ثلاثية الأبعاد بالتحرك على طول محور Z (العمق) والتدوير في الفضاء ثلاثي الأبعاد. لجعل التأثيرات ثلاثية الأبعاد واضحة بصرياً، يجب عليك تعريف المنظور (perspective).

1. تعريف المنظور

يتم ضبط المنظور على الحاوية الأب ويحدد عمق المشهد ثلاثي الأبعاد. القيمة الأصغر (مثل 200 بكسل) تخلق منظوراً أكثر دراماتيكية وقرباً.

css .scene { perspective: 800px; /* ضروري للعرض ثلاثي الأبعاد */ }

2. التحريك على محور Z (translateZ)

يحرك العنصر أقرب إلى أو أبعد عن المشاهد.

css .flying-text { transform: translateZ(100px); /* يتحرك 100 بكسل أقرب */ }

3. التدوير في 3D (rotateX, rotateY)

• rotateX(): يدور حول المحور الأفقي (يقلب من الأعلى للأسفل).
• rotateY(): يدور حول المحور الرأسي (يقلب من اليسار لليمين).

css .flip-card-front:hover { /* يقلب البطاقة 180 درجة أفقياً */ transform: rotateY(180deg); }

ملاحظة: عند الجمع بين التحويلات ثنائية وثلاثية الأبعاد، من الضروري استخدام الاختصارات translate3d(x, y, z) و scale3d(x, y, z) لتحسين الأداء عبر الـ GPU، حتى لو كانت قيمة Z هي 0.