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

Depth Movement With Translate3d التحريك في العمق بدالة translateZ

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

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

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

داخل حاوية مزودة بخاصية perspective، تحرّك دالة translateZ(z) العنصرَ نحو عين المشاهد بالقيم الموجبة فيبدو أقرب وأكبر، أو تدفعه للخلف بالقيم السالبة فيبدو أبعد وأصغر. ولأن العناصر ثنائية السماكة بطبيعتها، تشترط translateZ(z) وحدات طول صريحة مثل px ولا تقبل النسب المئوية.

ويمكنك جمع المحاور الثلاثة في دالة موحدة translate3d(x, y, z) مثل translate3d(16px, -8px, 45px)، أو تحجيم الفضاء الثلاثي عبر scale3d(sx, sy, sz). جرّب الحالات الثلاث في المختبر التفاعلي التالي لمعاينة العمق والمنظور:

الصف 2 معاينة حية