النماذج الثلاثية الأبعاد وCSS

Paul Kinlan

مقدمة

لطالما كانت التصاميم الثلاثية الأبعاد حكرًا على تطبيقات الكمبيوتر المكتبي. في الآونة الأخيرة، ومع طرح هواتف ذكية متقدّمة يمكنها الوصول إلى ميزة تسريع وحدة معالجة الرسومات (GPU) الأصلية، بدأنا نرى استخدام المحتوى الثلاثي الأبعاد في كل مكان تقريبًا.

وبشكل عام، يتم استخدام العرض الثلاثي الأبعاد بشكل أساسي كجهاز للألعاب أو بعض واجهات المستخدم المتقدمة. لم يكن هناك نموذج مناسب لتطبيق تأثيرات ثلاثية الأبعاد على عناصر واجهة المستخدم حتى تم تقديم عمليات التحويل المنظور في WPF وSilverlight، ما أصبح بمثابة حل عملي لمطوّري التطبيقات (بعد كل شيء، التأثيرات الثلاثية الأبعاد ليست سهلة تمامًا).

تم تقديم نموذج التحويل الثلاثي الأبعاد في CSS كنموذج أولي للمواصفات في آذار (مارس) 2009 للسماح لمطوّري الويب بإنشاء واجهات مستخدم مثيرة للاهتمام وجذابة تستفيد من العناصر الثلاثية الأبعاد من خلال السماح لمؤلفي التطبيقات بتطبيق عمليات التحويل الثلاثي الأبعاد على أي عنصر مرئي في نموذج DOM.

مسودة العمل الخاصة بتحويلات CSS الثلاثية الأبعاد هي إضافة منطقية إلى نموذج تحويلات CSS ثنائية الأبعاد، حيث تُقدّم بعض السمات الإضافية، بما في ذلك: المنظورات والدورانات والتحويلات في مساحة ثلاثية الأبعاد.

لم نتمكّن من قبل من إنشاء واجهات ثلاثية الأبعاد بهذه السهولة. وقد ساهمت هذه التقنيات في تقليل الحواجز التي تعيق جذب المستخدمين. لم تعُد بحاجة إلى أن تكون خبيرًا في الرياضيات لإنشاء عناصر ثلاثية الأبعاد.

تجدر الإشارة إلى أنّ وحدة CSS 3D مصمّمة لمساعدة المطوّرين في إنشاء تطبيقات غنية وممتعة من الناحية المرئية، وهي ليست مصمّمة لتتمكّن من إنشاء عوالم ثلاثية الأبعاد غامرة.

توافق المتصفّح وميزة "تسريع الأجهزة"

-webkit-perspective

-webkit-transform-3d

من المهم تذكُّر أنّه على الرغم من أنّ المتصفّح قد "يتوافق" مع المحتوى الثلاثي الأبعاد، إلا أنّه قد لا يتمكّن من عرض المحتوى الثلاثي الأبعاد بسبب قيود الأجهزة وبرامج التشغيل. يمكن أن تكون المَشاهد الثلاثية الأبعاد المستندة إلى DOM باهظة التكلفة من حيث العمليات الحسابية، ولذلك قرّر مورّدو المتصفّحات الاستفادة من وحدة معالجة الرسومات بدلاً من إبطاء المتصفّحات باستخدام حلّ رسومات برمجية صرف، علمًا بأنّ وحدة معالجة الرسومات قد لا تكون متاحة على جميع المنصّات.

ميزة "اكتشاف الأشياء"

ماذا عن اكتشاف الميزات؟ كنت أتمنى ألا تسأل! يستخدم المطوّرون أدوات مثل Modernizr لاكتشاف التوافق مع ميزات وقدرات معيّنة في المتصفح. على الرغم من أنّه من الممكن رصد إتاحة عمليات التحويل الثلاثية الأبعاد، لا يمكن رصد توفُّر تسريع الأجهزة، وتمثّل تسريع الأجهزة أحد المكوّنات الأساسية.

نموذج أساسي

لا يوجد شيء أفضل من القفز مباشرة. في هذا العيّنة، سنطبّق مجموعة أساسية من عمليات التدوير لعنصر DOM عشوائي.

نبدأ بتحديد منظور العنصر الجذر.

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

يُعدّ المنظور مهمًا لأنّه يحدّد كيفية عرض عمق المشهد الثلاثي الأبعاد، وستؤدي القيم من 1 إلى 1000 إلى تأثير واضح جدًا، وستكون القيم التي تزيد عن 1000 أقل تأثيرًا. سنضيف بعد ذلك إطارًا iframe ونطبّق دورانًا بزاوية 30 درجة حول محورَي Z وY.

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! هذا هو، العنصر تفاعلي بالكامل، وهو في جميع الجوانب عنصر DOM كامل (باستثناء أنه يبدو الآن أكثر روعة). إذا كان متصفحك لا يدعم التحويلات ثلاثية الأبعاد، فلن يحدث شيء. وسيظهر لك إطار iframe بسيط بدون تطبيق تدوير. إذا كان المتصفّح يتيح عمليات التحويل الثلاثية الأبعاد بدون تسريع الأجهزة، قد يبدو المشهد غريبًا بعض الشيء.

إنشاء صور متحركة

ما أحبّه في عمليات التحويل الثلاثية الأبعاد في CSS3 هو أنّها ترتبط بشكل جميل مع وحدة انتقال CSS. من السهل تحديد الرسومات المتحركة والانتقالات في CSS، ولا يُستثنى من ذلك تطبيقها على العناصر الثلاثية الأبعاد.

من السهل إضافة تأثيرات متحركة إلى العناصر التي تم تطبيق منظور ثلاثي الأبعاد عليها. ما عليك سوى ضبط نمط "الانتقال" على "التحويل" وإرفاق مدة ووظيفة للحركة. ومن ذلك الحين فصاعدًا، سيتم تطبيق تأثير متحرك على أي تغيير في نمط "التحويل".

لقد أعدنا صياغة الأمثلة السابقة لاستخدام أنماط المستندات بدلاً من الأنماط المضمّنة. ولا يؤدي ذلك فقط إلى توضيح المثال، بل يسمح للعيّنة بالاستفادة من أداة الاختيار الزائفة :hover. باستخدام أداة اختيار :hover، يمكن بدء الانتقالات من خلال تمرير مؤشر الماوس فوق العنصر. رائع!

ملخّص

لقد كانت هذه نظرة سريعة على بعض التأثيرات الرائعة التي يمكن تطبيقها على أي عنصر DOM مرئي باستخدام عمليات التحويل الثلاثية الأبعاد في CSS. لا يزال هناك العديد من الإجراءات التي يمكن تنفيذها والتي لم يتم التطرّق إليها في هذا الدليل التعليمي.