في هذا الدرس 6تصفّح المواضيع
يضيف الفضاء ثلاثي الأبعاد في CSS محوراً ثالثاً هو محور العمق Z المتجه عمودياً من سطح الشاشة نحو عين المشاهد، إلى جانب المحور الأفقي X والرأسي Y؛ حيث تقرّب القيم الموجبة على محور Z العنصر نحوك، وتبعده القيم السالبة إلى داخل الشاشة.
غير أن التحويل الثلاثي يبدو مسطحاً بلا عمق ما لم تضبط خاصية المنظور perspective على الحاوية الأب بمسافة رؤية مناسبة تتراوح غالباً بين 600px و 1000px؛ فالقيم الصغيرة مثل 350px تمنح تقارباً حاداً كعدسة قريبة جداً، بينما تمنح القيم الكبيرة مثل 1200px عمقاً هادئاً ومتوازناً:
تدير كل دالة دوران ثلاثية العنصرَ حول محور هندسي مختلف تماماً في الفراغ:
- الدالة
rotateX(angle): تدير العنصر حول محور أفقي فيميل طرفه العلوي للخلف أو للأمام كغطاء الحاسوب المحمول. - الدالة
rotateY(angle): تدير العنصر حول محور رأسي فينفتح جانبياً نحو المشاهد أو للداخل كحركة باب الغرفة أو قلب البطاقة. - الدالة
rotateZ(angle): تدير العنصر سطحياً على مستوى الشاشة حول محور العمق، وتكافئ التدوير الثنائي المعتاد.
.scene {
perspective: 650px;
}
.door-y {
transform: rotateY(35deg);
}
.flap-x {
transform: rotateX(35deg);
}داخل حاوية مزودة بخاصية perspective، تحرّك دالة translateZ(z) العنصرَ نحو عين المشاهد بالقيم الموجبة فيبدو أقرب وأكبر، أو تدفعه للخلف بالقيم السالبة فيبدو أبعد وأصغر. ولأن العناصر ثنائية السماكة بطبيعتها، تشترط translateZ(z) وحدات طول صريحة مثل px ولا تقبل النسب المئوية.
ويمكنك جمع المحاور الثلاثة في دالة موحدة translate3d(x, y, z) مثل translate3d(16px, -8px, 45px)، أو تحجيم الفضاء الثلاثي عبر scale3d(sx, sy, sz). جرّب الحالات الثلاث في المختبر التفاعلي التالي لمعاينة العمق والمنظور:
تطبّق المتصفحات افتراضياً القيمة transform-style: flat على أي عنصر أب خاضع للتحويل، مما يسطّح جميع عناصره الأبناء ويلصقهم بمستوى سطحه الواحد. وعند بناء بطاقات متعددة الطبقات أو مجسمات مركبة، اضبط transform-style: preserve-3d على الحاوية الدوارة ليحتفظ أبناؤها المباشرون بمواضعهم المستقلة في العمق عبر translateZ(z):
.stage {
perspective: 700px;
}
.card-wrap {
transform-style: preserve-3d;
transform: rotateY(-28deg);
}
.badge-pop {
transform: translateZ(36px);
}عندما تقلب عنصراً بزاوية نصف دورة rotateY(180deg)، تعرض القيمة الافتراضية backface-visibility: visible نسخة معكوسة كالمرآة من محتواه الأمامي. أما ضبط backface-visibility: hidden فيخفي ظهر العنصر تماماً فور التفاته بعيداً عن المشاهد، وهو الأساس العملي لبناء البطاقات التعليمية ذات الوجهين الأمامي والخلفي:
يُلخّص الجدول المرجعي التالي توزيع خصائص المنظور والتحويل الثلاثي بين الحاوية الأم والعناصر المتحرّكة بداخلها، مع تذكّر أن القيمة 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 لتحويل التغيرات الفورية إلى حركة زمنية ناعمة ومتدرجة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Perspective Distance مسافة المنظور
- المسافة الافتراضية بين عين المشاهد ومستوى الشاشة التي تمنح التحويلات الثلاثية عمقاً واقعياً.
- للمراجعة
- 02 Vanishing Point نقطة التلاشي البصرية
- النقطة البؤرية التي تتحكم بها خاصية perspective-origin وتتقارب نحوها الحواف المبتعدة في العمق.
- للمراجعة
- 03 Shared 3D Context الفضاء الثلاثي المشترك
- وضع عرض تفعّله القيمة preserve-3d ليحتفظ الأبناء بمواضعهم المستقلة في العمق بدلاً من تسطيحهم.
- للمراجعة
- 04 Element Backface الوجه الخلفي للعنصر
- الجانب الخلفي المعكوس لصندوق العنصر الذي ينكشف عند تدويره بأكثر من 90 درجة حول المحور الأفقي أو الرأسي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 3D 3D
- Three-Dimensional
- النظام الإحداثي الفراغي الذي يجمع المحور الأفقي X والمحور الرأسي Y ومحور العمق Z.
- للمراجعة
- 02 FOV FOV
- Field of View
- زاوية الرؤية البصرية التي تزداد حدتها كلما صغرت قيمة خاصية المنظور بالبكسل.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- شجرة عناصر المستند التي تنظم علاقة الحاوية الأب بأبنائها داخل المشهد ثلاثي الأبعاد.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
غيّر قيمة perspective للحاوية من 350px إلى 1100px ولاحظ الفرق في حدة تقارب حواف البطاقة المائلة.
-
بدّل قيمة transform-style بين flat و preserve-3d على البطاقة الأم لملاحظة بروز الشارة الداخلية للأمام.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.