انتقل إلى محتوى الدرس

3D Axes and Perspective Setup المحور الثالث وإعداد المنظور

أتقن التحويلات ثلاثية الأبعاد في لغة CSS لضبط منظور المشهد وتدوير العناصر حول المحاور الثلاثة وتحريكها في العمق مع حفظ الفضاء الثلاثي للأبناء وإخفاء الوجه الخلفي للبطاقات.
3 صفوف تعليمية
لغة CSS
4,374 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يضيف الفضاء ثلاثي الأبعاد في CSS محوراً ثالثاً هو محور العمق Z المتجه عمودياً من سطح الشاشة نحو عين المشاهد، إلى جانب المحور الأفقي X والرأسي Y؛ حيث تقرّب القيم الموجبة على محور Z العنصر نحوك، وتبعده القيم السالبة إلى داخل الشاشة.

غير أن التحويل الثلاثي يبدو مسطحاً بلا عمق ما لم تضبط خاصية المنظور perspective على الحاوية الأب بمسافة رؤية مناسبة تتراوح غالباً بين 600px و 1000px؛ فالقيم الصغيرة مثل 350px تمنح تقارباً حاداً كعدسة قريبة جداً، بينما تمنح القيم الكبيرة مثل 1200px عمقاً هادئاً ومتوازناً:

الصف 2 صورة توضيحية
مخطط يوضح إعداد منظور المشهد والدوران حول محاور العمق وحفظ الفضاء الثلاثي وإخفاء الوجه الخلفي
الصف 3 ملاحظة هامة