مقدمة
لطالما كان التصميم الثلاثي الأبعاد هو الاحتفاظ بتطبيقات سطح المكتب. في الآونة الأخيرة، مع ظهور الهواتف الذكية المتقدمة التي يمكنها الوصول إلى التسريع الأصلي لوحدة معالجة الرسومات، بدأنا في ملاحظة استخدام النماذج الثلاثية الأبعاد في كل مكان تقريبًا.
يُستخدم المحتوى الثلاثي الأبعاد بشكل عام كجهاز للألعاب أو بعض واجهات المستخدم المتقدمة. لم يصبح النموذج المناسب لتطبيق التأثيرات الثلاثية الأبعاد على عناصر واجهة المستخدم حلاً عمليًا لمطوّري التطبيقات إلا بعد أن بدأ ظهور النماذج الثلاثية الأبعاد في WPF وSilverlight إلا بعد إطلاق عمليات تحويل Perspective API.
تم تقديم نموذج التحويل الثلاثي الأبعاد لـ CSS كمواصفات مسودة في آذار (مارس) 2009 للسماح لمطوّري الويب بإنشاء واجهات مستخدم مثيرة للاهتمام وجذابة تستفيد من التصميم الثلاثي الأبعاد من خلال السماح لمؤلفي التطبيقات بتطبيق عمليات تحويل المنظور الثلاثي الأبعاد على أي عنصر DOM مرئي.
مسودة عمل تحويل CSS ثلاثي الأبعاد هي إضافة منطقية إلى نموذج تحويل CSS 2D، حيث تقدم بعض الخصائص الإضافية، بما في ذلك: وجهات النظر، وعمليات التدوير، والتحويل في مساحة ثلاثية الأبعاد.
لم يسبق لنا أن تمكنا من إنشاء واجهات ثلاثية الأبعاد بهذه السهولة. ساعدت هذه التقنيات في تقليل العوائق التي تحول دون الدخول. لم يعد يتعين عليك أن تكون خبيرًا في الرياضيات لإنشاء عناصر ثلاثية الأبعاد.
تجدر الإشارة إلى أن الوحدة ثلاثية الأبعاد في CSS تهدف إلى مساعدة المطورين في إنشاء تطبيقات غنية ومثيرة للاهتمام مرئيًا، ولم يتم تصميمها لتمكينك من إنشاء عوالم ثلاثية الأبعاد مجسَّمة.
دعم المتصفّح وتسريع الأجهزة
-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>
رائع! أي أنّ العنصر تفاعلي بالكامل، وهو من جميع النواحي عبارة عن عنصر DOM كامل الميزات (باستثناء أنّه يبدو الآن أكثر برودة). وإذا لم يكن المتصفّح يتيح استخدام عمليات التحويل الثلاثية الأبعاد، لن يحدث أي شيء. سترى فقط إطار iframe بسيط بدون تطبيق أي تدوير. وإذا كان متصفحك يدعم التحويلات ثلاثية الأبعاد ولكن بدون تسريع الأجهزة، فقد يبدو غريبًا بعض الشيء.
الصور المتحركة
ما يعجبني في التحويلات ثلاثية الأبعاد CSS3 هو أنها ترتبط بشكل رائع بوحدة نقل CSS. من السهل تحديد الرسوم المتحركة والانتقالات في CSS، وتطبيقها على الأبعاد الثلاثية ليس استثناءً.
من السهل إضافة صور متحركة للعناصر التي يتم تطبيق منظور ثلاثي الأبعاد عليها. ما عليك سوى تعيين نمط "النقل" على "تحويل"، وإرفاق مدة ودالة رسوم متحركة. من ذلك الحين فصاعدًا، ستتم إضافة تأثيرات حركية إلى أي تغيير يتم إجراؤه على نمط "التحويل".
لقد أعدنا تحليل الأمثلة السابقة لاستخدام أنماط المستندات، بدلاً من الأنماط المضمّنة. ولا يؤدي ذلك إلى توضيح المثال فحسب، بل يتيح للعيّنة الاستفادة من أداة الاختيار الزائفة في :hover. باستخدام أداة الاختيار :hover، يمكن بدء الانتقالات من خلال تحريك الماوس فوق العنصر ببساطة. رائع!
ملخّص
كانت هذه نظرة سريعة على بعض التأثيرات الرائعة التي يمكن تطبيقها على أي عنصر DOM مرئي باستخدام التحويلات ثلاثية الأبعاد لـ CSS. لا يزال هناك الكثير من الإجراءات التي يمكن تنفيذها والتي لم يتم تناولها في هذا البرنامج التعليمي.