نصائح مفيدة

كيفية إنشاء رسومات ثلاثية الأبعاد رائعة في CSS3

Pin
Send
Share
Send
Send


أظهرت قناة نظرة عامة كيفية عمل مكعب ثلاثي الأبعاد على خدمة bloggif.com عبر الإنترنت. للقيام بذلك ، انقر فوق المكعب ثلاثي الأبعاد ، وفي الإطار التالي نبدأ في إنشائه. للقيام بذلك ، أضف خمس صور. إضافة. النظر في مثال الدببة. نختار - الرقم الأول والثاني والثالث ، استبدال الرقم الثاني والرابع والخامس. بعد ذلك ، تحتاج إلى تحديد سرعة الدوران. اترك رابيد - وهذا هو متوسط ​​السرعة. يمكنك تحديد الخلفية التي سيكون عليها المكعب. إذا كنت تريد بدون خلفية ، فأنت تحتاج فقط إلى تحديد المربع - شفاف.

اختيار الأزرق. واتجاه التناوب. ثم نضغط على الزر - CREATE MY 3 D CUBE. الآن ، ثلاثة د مكعب جاهزة. قبل التنزيل ، ضع علامة اختيار - قم بالتنزيل بدون شعار وقم بتنزيل ملف Gif الخاص بي. نختار المجلد المراد حفظه ، اسم الملف ومعرفة ما حدث. وكانت النتيجة مثل هذا المكعب ، متحركة gif. هذا كل شيء. تطبيق المعرفة المكتسبة. كان أولغا Taranukha معك.

لماذا استخدام CSS؟

هناك العديد من الطرق لإنشاء رسومات ثلاثية الأبعاد في HTML. بناءً على JS ، Canvas ، SVG ، حتى الحلول المستندة إلى WebGL متوفرة ، وكلها لها مزاياها ، ولكن هناك أيضًا CSS.

يختفي الحل المستند إلى CSS بالصور ويمكنه استخدام معالج رسومات لتسريع معالجة الرسومات.

ليست هناك حاجة إلى مكونات إضافية ، ويمكن أن يعيش CSS خارج جدران اللوحات على صفحتك:

لا يتم تحسين رسومات CSS ثلاثية الأبعاد مثل WebGL. موضوع منفصل هو متصفحات غير متوافقة. ومع ذلك ، فإن إدراج كائنات ثلاثية الأبعاد في مشاريع الويب يفتح مجالات عمل جديدة ، ويمكن استخدامه اليوم.

لا تدعم جميع المتصفحات التحويلات ثلاثية الأبعاد المستخدمة بشكل كامل في هذه المقالة ، لذا من أجل الإيجاز ، سأستخدم بادئة الويب.

لا تنس تضمين البادئات الخاصة بـ Mozilla و Opera و MS ، وكذلك الإصدارات دون البادئات إذا لزم الأمر. إصدارات CSS الكاملة (مع البادئات) موجودة في ملفات المشروع.

الأساسيات: إنشاء مكعب ثلاثي الأبعاد

أولاً ، سنقوم بإنشاء مكعب ثلاثي الأبعاد أساسي عن طريق وضعه وتحريكه في مساحة ثلاثية الأبعاد. أولاً ، اكتب تعليمات HTML البرمجية التي ستمثل أجزاء من المكعب ثلاثي الأبعاد:

لقد استخدمت عنصر الشكل ، لكن يمكنك استخدام div أو span أو أي نوع آخر من العناصر وفقًا لتقديرك.

في رمز HTML هذا ، يمكن تمييز جزأين رئيسيين: المشهد الذي يتم وضع كل شيء فيه ، والمكعب الموجود على المشهد:

إعداد المشهد

أول ما يجب فعله عند إنشاء نموذج ثلاثي الأبعاد هو إنشاء عنصر يعمل كمشهد.

اضبط عمق المشهد باستخدام خاصية منظور CSS:

يؤدي تعيين قيمة أكبر لخاصية المنظور إلى إنشاء تأثير ثلاثي الأبعاد أقل وضوحًا ، في حين أن التأثير الأصغر يجعله أكثر وضوحًا.

قيمة 800 بكسل أو نحو ذلك مناسبة بشكل عام لمعظم الكائنات الصغيرة ، ولكن إذا قمت بإنشاء شيء أكبر (مثل ناطحة سحاب) ، يمكنك استخدام قيمة أقل لإنشاء زوايا أكثر وضوحًا.

عند تعيين خاصية المنظور ، يجب عليك أيضًا تعيين أصل المنظور (خاصية تحدد موضع الكاميرا الافتراضية التي تواجه المشهد) ، والموضع على محوري X و Y.

خلق أشكال: التفكير المكاني

ينطوي إنشاء أشكال ثلاثية الأبعاد باستخدام HTML و CSS على تمثيل كائن كمجموعة من مستويات ثنائية الأبعاد.

بدلاً من رسم القمم وجمع الأشكال من النقاط والخطوط ، والتي ، كما تعلمون ، تتم في برامج ثلاثية الأبعاد أخرى ، سنعمل مع طائرات ثنائية الأبعاد ، ونضعها في نفس الوقت. نحن تجميع مكعب من ست طائرات المقابلة للجانبين ، قمة وقاعدة.

أولاً ، دعنا نعطي عناصر الشكل الشكل والأسلوب:

الخطوة التالية هي الإشارة إلى المكان الذي يجب أن يكونوا فيه في مساحة ثلاثية الأبعاد.

وقت التحويل

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

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

نحدد أيضًا النقطة المتعلقة بإجراء التحويلات.

تحدد خاصية أصل التحويل النقطة في إحداثيات X ، Y ، Z ، والتي تعمل بمثابة مركز الدوران (هذا هو منتصف مقدمة العنصر):

يتم تحريك الرقم الأمامي بمقدار 150 بكسل للأمام ، ويتم قلب الخلفية بمقدار 180 درجة وتحويل 150 بكسل إلى الجزء الخلفي من المشهد.

الترتيب هنا مهم - يتم تطبيق قواعد التحويل من اليسار إلى اليمين. بالنسبة للتحول الثاني ، يتم تعيين قيمة موجبة: بعد الدوران ، يواجه الجانب الأمامي الجزء الخلفي من المشهد.

كما كان من قبل ، فإن ترتيب قواعد التحول مهم. إذا تم تدوير العنصر ، فسيكون المحور Z بزاوية مختلفة ، مما سيؤثر على أي تحول آخر.

الآن ضع الجوانب الأخرى:

لدينا الآن المكعب الموجود في المشهد ثلاثي الأبعاد.

تحرك ، تحرك

دعنا ندير إنشاء ثلاثي الأبعاد على المسرح باستخدام الرسوم المتحركة لـ CSS:

يتم إنشاء الرسوم المتحركة CSS باستخدام سلسلة من الإطارات الرئيسية. Keyframes هي مجموعة من حالات الكائنات التي تم إنشاؤها باستخدام النسب المئوية.

تبدأ الرسوم المتحركة بتدوير صفري وتنتهي بتدوير كامل للعنصر المحيط بالمحور Y.

قم بتطبيق مجموعة الإطارات المفتاحية هذه مع خاصية الرسوم المتحركة:

تم تصميم الرسوم المتحركة للتناوب المطبقة هنا لمدة 10 ثوانٍ ، وتتكرر إلى ما لا نهاية مع سرعة خطية ثابتة:

لدينا مكعب يدور على خشبة المسرح ، لكنه الآن مضاء من جميع الجوانب. لإضافة ظل دون استخدام المزيد من المحددات ، سنستخدم محددات زائفة.

محددات الزائفة تشبه عناصر HTML الإضافية التي يمكن إدراجها قبل وبعد محتويات العنصر.

إنها توفر لنا ميزات إضافية وقد تحتوي على تدرجات أو ألوان أو حتى نص. وبهذه الطريقة يمكننا تحريك التعتيم على كل جانب من المكعب.

نحتاج إلى تدرجين: الأول للحالة عندما يتحول السطح إلى اليسار ، والآخر للتدوير إلى اليمين:

العناصر السابقة واللاحقة في هذا المثال عبارة عن محددات زائفة يمكن تصميمها وتحريكها.

من المهم ملاحظة أن هذه الميزة لا تدعمها المتصفحات بشكل كامل - Google Chrome و Firefox و IE10 يقدمان مستويات مختلفة من الدعم - وقد يتحسن الموقف.

قم بتطبيق الرسوم المتحركة على كل محدد زائف لتحديد وقت عرض / إخفاء هذه التدرجات:

تتكون كل حركة من مجموعة من الإطارات الرئيسية التي تعرض أو تخفي التدرج اللوني أثناء الحركة.

فيما يلي إطارات مفتاحية مطبقة على الجانب الخلفي:

مجموعة كاملة من الرسوم المتحركة ، جنبا إلى جنب مع البادئات لكل متصفح ، هي في ملفات المشروع.

أعلى وأسفل

الخطوة التالية هي أعلى وأسفل المكعب. يحتاج الرأس إلى تدرج يبدو وكأنه لا شيء يتحرك.

أضف تدرجًا إلى العنصر العلوي وقم بتدويره في الاتجاه المعاكس:

لن تكون قاعدة المكعب مرئية ، ولكن يمكننا استخدامه لإضافة سمة box-shadow:

أكثر من مجرد لون

في هذه المرحلة ، باستخدام CSS فقط ، أنشأنا مكعبًا مظللاً متحركًا ، وإن كان ذو جوانب صلبة. نظرًا لأننا نعمل مع عناصر HTML ، يمكننا اللعب مع المحتوى.

يمكن أن تحتوي وجوه المكعب على صور أو نصوص أو حتى رسوم متحركة أخرى. في المثال أدناه ، قمت بتطبيق بعض صور الخلفية من لعبة Minecraft:

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

إذا كان التظليل والظل المتحركين غير كافيين ، فيمكننا إضافة المزيد من اللمعان إلى المشهد باستخدام مرشحات WebKit الفاخرة (لاحظ أنه في هذه اللحظة تكون هذه الوظيفة ممكنة فقط مع WebKit):

إضافة محتوى

أضف المحتوى الذي يقع في مجال رؤية المستخدم عند تدوير المكعب. سيحدث هذا على الجانب الأيمن من المكعب. نقوم بتوصيل جافا سكريبت قليلاً بالعمل لاستدعاء زر "متابعة" (متاح في صفحة أزرار Twitter).

يجب أن يحتوي عنصر الشكل مع الفصل الأيمن على شيء مثل هذا:

يتم وضع زر "متابعة" عن طريق إضافة قاعدة iframe إلى CSS:

سقسقة على مكعب

يوفر Twitter طريقة سهلة للحصول على أحدث التغريدات على أنها تطبيقات مصغّرة. لتثبيت التطبيق المصغّر ، سجّل الدخول إلى حساب Twitter وانتقل إلى صفحة أداة Twitter.

حدد "إنشاء زر جديد" ، ثم أدخل اسم مستخدم Twitter الخاص بك في حقل اسم المستخدم. في هذا المثال ، نستخدم تسجيل دخول netmag.

انقر على زر إنشاء عنصر واجهة مستخدم لإنشاء كود التضمين.

يمكننا تبسيط عنصر واجهة المستخدم وتعيين قيم العرض والارتفاع وبعض قيم البيانات في الكود. استبدل YOUR_WIDGET_ID بالمعرف المقدم في شفرة التضمين:

تحول

للتظليل ، لا نحتاج إلى رسوم متحركة بإطارات مفاتيح: ستظهر عند تحريك حدث أو تشغيله.

أضف بعض التحولات إلى تظليل المحددات الزائفة:

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

إلى اليمين: بعد إخفاء الزائف ، حيث لن نقوم بتدوير المكعب حسب الحاجة. ومع ذلك ، يكون الجانب الأمامي غامقًا ، ولكنه أفتح من الجانب الأيمن عندما يتحول إلى الأمام:

تحوم الرسوم المتحركة

الآن ، بإضافة تأثيرات تظليل ، سنقوم بإنشاء تأثير "مختلس النظر" للرسوم المتحركة عندما يحوم المستخدم فوق المكعب باستخدام حالة تحويم CSS:

عندما تحوم ، يدور المكعب 50 درجة إلى اليسار. يتم إجراء هذا التحول كعملية انتقال سلسة من خلال تطبيق خاصية النقل.

في الوقت نفسه ، فإن قيمة عتامة محددات الزائفة على الجانبين الأمامي الأيمن من المكعب تصل إلى 0.2.

نتيجة كل هذه التحولات هي تأثير تناوب ثلاثي الأبعاد جميل يتيح لك إخفاء محتوى إضافي - وإظهاره إذا كان المستخدم يحوم فوق المكعب.

يمكن العثور على كود HTML و CSS الكامل في ملفات المشروع:

يحتوي إنشاء كائنات من عناصر HTML المسطحة على عدد من القيود: يجب إجراء أي كائن تقوم بإنشائه من خلال الجمع بين النماذج المسطحة للحصول على النتيجة النهائية.

من الصعب إنشاء كائنات منحنية ، مثل الأنابيب والمجالات ، دون استخدام عدد كبير من العناصر ، لذلك يكون هذا الحل أكثر ملاءمة لكائنات أبسط.

لكن مع اللجوء إلى استخدام الظلال والرسوم المتحركة ، يمكنك الحصول على نتائج رائعة مع هياكل بسيطة.

الأداء والاختبار

عند إنشاء كائنات ثلاثية الأبعاد ، يجب أن تتذكر أن أداء المستعرض وسرعة الكمبيوتر قد يتفاوتان اختلافًا كبيرًا. في الواقع ، لم يتم تحسين CSS للمشاهد ثلاثية الأبعاد المعقدة المحملة بيانيا ، لذلك عليك أن تكون حذرا عند العمل مع المشاريع العامة.

اختبار عبر الأنظمة الأساسية: يمكن للزوار أيضًا استخدام الأجهزة المحمولة أو أجهزة الكمبيوتر البطيئة القديمة.

على الرغم من أنها مسألة وقت فقط قبل أن تدعم جميع المتصفحات التحويلات ثلاثية الأبعاد والتدرجات اللمسات الأنيقة التي استخدمناها هنا ، إلا أن الحقيقة هي أن معظم المتصفحات لا تزال لا تدعمها.

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

تتمثل إحدى طرق حل هذه المشكلة في استخدام ميزة الكشف عن الميزات وعرض إصدار بديل للمتصفحات التي لا تدعم الخصائص المطلوبة.

في هذه الحالة ، سوف نستخدم البرنامج النصي Modernizr لمعرفة ما إذا كانت التحويلات ثلاثية الأبعاد مدعومة ، وإذا لم يكن الأمر كذلك ، فسنعرض صورة ثابتة.

للبدء ، قم بتمكين Modernizr في رأس HTML:

عند التحميل ، سيتم إدراج الفئة csstransforms3d في العلامة. ثم سنستخدم هذه المعلومات لإظهار أو إخفاء خيار النسخ الاحتياطي:

في هذا المثال ، الصورة الثابتة هي بديل. استخدم عنصر div backback لتمثيل محتوى ثنائي الأبعاد في مستعرض أو رسالة بديلة:

الخطوات التالية

قد لا يكون المكعب ثلاثي الأبعاد المصقول هو أول شيء يطلب من معظم عملاء تصميم الويب القيام به ، ولكن قد يكون لبعض الأساليب المذكورة أعلاه استخدامات مختلفة.

يمكنك إنشاء تأثير انتقال ثلاثي الأبعاد عند التمرير فوق الشعار - طريقة جذابة لإظهار منتج جديد - أو استخدام هذه الطرق لتقديم بيانات معقدة والتنقل فيها. إن استخدام المحور Z في التصميم يفتح الباب أمام العديد من الأفكار المثيرة والممتعة.

هذا المنشور هو ترجمة لمقال "كيفية إنشاء رسومات ثلاثية الأبعاد مثيرة للإعجاب في CSS3" أعدها الفريق الودود لمشروع تكنولوجيا الإنترنت

Pin
Send
Share
Send
Send