10 مشاريع ثلاثية الأبعاد مذهلة تم إنشاؤها بالكامل باستخدام CSS و JavaScript

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

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

مربعات المنظور

صدق أو لا تصدق هذا الصندوق المتحرك تم صنعه بتحولات CSS3 نقية. من السهل جدًا عرض المكعبات الفعلية باستخدام CSS وتعمل الألوان البديلة مع فئات مختلفة.

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

نقي CSS3 الرسم البياني

أحد الأمثلة الأخرى على الرسوم المتحركة الخالصة لـ CSS3 هو هذا الرسم البياني الشريطي الذي أنشأته آنا تيودور. يستخدم حاوية HTML بسيطة مع أربعة أقسام داخلية تمثل الجوانب الأربعة لكل مستطيل.

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

يستخدم هذا الكثير من أكواد Sass لأتمتة الرسوم المتحركة بوظائف الحساب ، لذا فهي تقنية إلى حد ما. ولكن إذا كنت تحاول معرفة المزيد عن 3D ، فهذا قلم صلب للتعمق فيه.

رؤية النفق

للحصول على تجربة متصفح ويب trippy ، ألق نظرة على هذا النفق ثلاثي الأبعاد الذي تم إنشاؤه باستخدام بعض تحويلات CSS3 وخصائص Sass فقط.

تعمل الألوان البديلة من خلال Sass for loop الذي يبدل قيمة لون HSL بعد فترة زمنية معينة. تعطي هذه الحلقات الوهم بأنك تسافر عبر نفق من قطع القصاصات الملونة إلى أجل غير مسمى. البرية جميلة!

قد لا يبدو شيئًا خاصًا وهو بالتأكيد غير عملي لموقع ويب رئيسي. لكنها شهادة على مقدار ما يمكنك فعله ببعض الإبداع ومعرفة الترميز.

3D iPhone في CSS

قدم iPhone 4 تصميمًا جديدًا جذريًا وقد أثار إعجاب الجميع بالهاتف الذكي الجديد القاتل. يجب أن يكون المطور Jonathan Levaillant قد استمتع بالفعل بجهاز iPhone 4 منذ أن أعاد إنشاء التصميم في CSS خالص.

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

الأمر الأكثر جنونًا في هذا الأمر هو أنه يعتمد فقط على CSS في كل شيء. سأشعر بالذهول في 10 سنوات أخرى عندما تكون أجهزة iPhone CSS3 النقية تفاعلية بالكامل في المتصفح.

نظام ثلاثي الأبعاد للطاقة الشمسية

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

إنه يستخدم الكثير من CSS لكن معظم التأثيرات القابلة للتخصيص تعتمد على JavaScript. يتيح لك ذلك تغيير السرعة والحجم والمسافة بين الكواكب المختلفة.

يمكنك حتى التبديل بين العرض ثلاثي الأبعاد والعرض العلوي ثنائي الأبعاد بسهولة نسبية. تحدث عن استخدام ممتاز لتطوير الواجهة الأمامية!

مكعبات مظللة

قد لا تبدو هذه المكعبات البسيطة المظللة كثيرًا. إنها مدمجة في CSS ويتم تدويرها تلقائيًا على محور واحد باستخدام الرسوم المتحركة CSS3.

ولكن هناك إعداد تفاعلي حيث يمكنك تحريك المكعبات عند تحريك الماوس. هذه بالتأكيد خدعة رائعة وتعتمد على بعض تقنيات CSS النادرة بما في ذلك :hover و :checked من الفئات الزائفة جنبًا إلى جنب مع tilde(~) selector .

دائري CSS ثلاثي الأبعاد

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

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

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

برد الأسد

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

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

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

هذا مثال مفصل آخر على المدى الذي وصلت إليه التأثيرات ثلاثية الأبعاد.

3D تحكم NES

تركت الألعاب الكلاسيكية بصماتها على الجيل الحالي من المبرمجين ويمكنك رؤية ذلك باستخدام وحدة تحكم 3D NES الخاصة بـ Johan van Tongeren والتي تم تقديمها في CSS3 النقي.

إنه يعمل بشكل أفضل في متصفحات Chrome / WebKit على الرغم من أنه يجب أن يكون جيدًا في Firefox أيضًا. إنها حقًا تجربة لمعرفة المدى الذي وصلت إليه CSS ، لذلك لا تتوقع أن تكون مثالية!

مدارات كبلر

لا أستطيع أن أتخيل كم من الوقت استغرق بناء هذا النموذج الواقعي لمسار مدار كبلر. يوضح هذا النموذج حركة جسم بالنسبة إلى آخر في الفضاء ، وفي هذه الحالة قام المطور Danie Clawson بعمل مذهل.

يستخدم هذا النموذج بالكامل CSS للعناصر المرئية و Three.js للتأثيرات ثلاثية الأبعاد. في الزاوية العلوية اليسرى ستجد مربع خيارات حيث يمكنك تغيير العديد من متغيرات المدار للتأثير على سرعة الكائن وحجمه وموضعه.

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

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