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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

Paul Kinlan

مقدمة

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

وعادةً ما يتم استخدام تقنية 3D بشكل أساسي كجهاز للألعاب أو بعض واجهات المستخدم المتقدّمة. لم يكن هناك نموذج مناسب لتطبيق تأثيرات ثلاثية الأبعاد على عناصر واجهة المستخدم حتى تم تقديم عمليات التحويل المنظور في 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. لا تزال هناك العديد من الإجراءات التي يمكن تنفيذها والتي لم يتم التطرّق إليها في هذا الدليل التعليمي.