شرح صفوف ومحتوى الفقرة
يُلخّص الجدول المرجعي التالي توزيع خصائص المنظور والتحويل الثلاثي بين الحاوية الأم والعناصر المتحرّكة بداخلها، مع تذكّر أن القيمة transform: none تعيد العنصر فوراً إلى وضعه المسطح الطبيعي تمهيداً لتحريك هذه البطاقات بنعومة زمنية في الدرس القادم:
| الخاصية أو الدالة | العنصر المستهدف | الدور الوظيفي في الفضاء الثلاثي |
|---|---|---|
perspective | حاوية المشهد الأب | تحديد مسافة عين المشاهد مثل 700px لإبراز العمق |
perspective-origin | حاوية المشهد الأب | تغيير موقع نقطة التلاشي عن المنتصف الافتراضي 50% 50% |
rotateX(a) و rotateY(a) | العنصر المتحرّك | إمالة العنصر للأمام والخلف أو قلبه جانبياً |
translateZ(z) و translate3d(x, y, z) | العنصر المتحرّك | تقريب العنصر أو إبعاده على محور العمق Z |
transform-style: preserve-3d | الغلاف الدوّار الأب | منع تسطّح العناصر الأبناء داخل مستوى واحد |
backface-visibility: hidden | وجه البطاقة | إخفاء الظهر المعكوس عند القلب بزاوية تتجاوز 90deg |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلّمت في هذا الدرس إعداد خاصية المنظور perspective وتدوير العناصر حول المحاور الثلاثة وتحريكها في العمق مع تفعيل preserve-3d وإخفاء الظهر عبر backface-visibility: hidden. وفي الخطوة التالية سننتقل إلى درس الانتقالات في لغة CSS لتحويل التغيرات الفورية إلى حركة زمنية ناعمة ومتدرجة.