التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ
أدر العناصر وحرّكها في فضاء ثلاثي الأبعاد باستخدام دوال تحويل CSS ثلاثية الأبعاد
التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
نظرة عامة على التحويل ثلاثي الأبعاد
توسّع تحويلات CSS ثلاثية الأبعاد النظام الثنائي الأبعاد إلى بُعد ثالث باستخدام المحور Z. فعّل الأبعاد الثلاثية باستخدام perspective على العنصر الأب وtransform-style: preserve-3d للعناصر ثلاثية الأبعاد المتداخلة.
rotateX()
تدير rotateX(angle) عنصرًا حول المحور الأفقي X، مثل قلب صفحة باتجاهك أو بعيدًا عنك.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
تدير rotateY(angle) العنصر حول المحور الرأسي Y، مثل تدوير باب حول مفصلته.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
تطابق rotateZ(angle) دالة rotate() الثنائية الأبعاد؛ فهي تدير العنصر في مستوى الشاشة.
rotate3d()
تدير rotate3d(x, y, z, angle) العنصر حول متجه محور ثلاثي الأبعاد مخصص. وتحدّد قيم x وy وz اتجاه المحور.
<div class="element">3D</div>translateZ()
تنقل translateZ() العنصر باتجاه المشاهد أو بعيدًا عنه على محور Z. تجعل القيم الموجبة العنصر أقرب، بينما تجعله القيم السالبة أبعد.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
تنقل translate3d(x, y, z) العنصر على المحاور الثلاثة كلها في آنٍ واحد. ويؤدي استخدام translateZ(0) إلى إجبار المتصفح على ترقية العنصر إلى طبقة GPU، وهي حيلة شائعة لتحسين الأداء.
<div class="animated">GPU layer</div>scale3d()
تغيّر scale3d(x, y, z) الحجم في ثلاثة أبعاد. وتغيّر scaleZ() العمق، وهو أمر مفيد لأوجه المكعبات ثلاثية الأبعاد.
مثال على مكعب ثلاثي الأبعاد
بناء مكعب باستخدام تحويلات ثلاثية الأبعاد على ستة أوجه:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>تأثير اختلاف المنظر ثلاثي الأبعاد
يؤدي استخدام translateZ على العناصر الفرعية إلى إنشاء عمق في مشهد ثلاثي الأبعاد قابل للتمرير (CSS Parallax):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>التسريع بالعتاد
تجبر التحويلات ثلاثية الأبعاد، حتى البسيطة منها مثل translateZ(0)، العنصر على الانتقال إلى طبقة GPU خاصة به. يمنع ذلك إعادة الرسم أثناء التحريك، لكنه يستهلك ذاكرة GPU. استخدمه بقصد، لا باعتباره حيلة عامة.
تحقق سريع
ما دالة التحويل التي تنقل عنصرًا على محور Z، أي باتجاه المشاهد أو بعيدًا عنه؟
مراجعة
تستخدم تحويلات CSS ثلاثية الأبعاد rotateX/Y/Z() للدوران حول كل محور، وtranslateZ() للحركة في العمق. فعّل الأبعاد الثلاثية الحقيقية باستخدام perspective على العنصر الأب وtransform-style: preserve-3d. استخدم backface-visibility: hidden لتأثيرات القلب. وتؤدي التحويلات ثلاثية الأبعاد إلى ترقية العنصر إلى طبقة GPU لتحقيق تحريك سلس.
الأسئلة الشائعة
هل درس «التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ» مجاني؟
نعم — نص درس «التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ»؟
أدر العناصر وحرّكها في فضاء ثلاثي الأبعاد باستخدام دوال تحويل CSS ثلاثية الأبعاد تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Translate وRotate وScale
- تحويلات Skew وMatrix
- أصل التحويل والمنظور
- التحويلات ثلاثية الأبعاد: rotateX وrotateY وtranslateZ