איך ליצור קוביית תלת-מימד שמגיבה לגלילה — בלי שורת JavaScript אחת!

הפוסט הזה הוא בין הפוסטים המגניבים ביותר שתקראו היום! 😍😍😍 ואו איזה קליקביט הא? מבית היוצר של "הטריק הזה יצעיר אותכם בחמישים שנה והוא לוקח רק 5 דקות" ובתוך הכתבה איזה פנינת חוכמה סטייל "שתו ממעין הנעורים" ואז פרסומת למוצרי ים המלח והשקעה במטבע קריפטו חדש שנקרא oketz והוא זמין רק היום. טוב אז אנחנו כאן איפה הקאצ'? 🙄 תלת מימד ואינטראקטיביות הביאו ילד יחד, אולי הוא לא הכי יפה ומוצלח אבל דודה שרופה עליוווווווו.🦄 ואני מדבר על אלמנט שמסתובב בתלת מימד בגלל הגלילה של המשתמש אז מדובר פה בהכלאה של שני פוסטים קודמים שלי 1. יצירת אלמנטים תלת מימדיים בעזרת transform-style: preserve-3d. 2. יצירת טריגר לאנימציה עם animation-timeline: scroll() ביחד ללא שום פיסת js ובלי שום קובץ תלת מימד פיזי. רק מקלדת, חשיבה יצירתית, ואמונה בצדקת הדרך אנחנו יוצרים קוביה תלת מימדית. ואז גורמים לה להציג את כל הצדדים באישיות שלה ככל שהמשתמש גולל. וכדי להוסיף מימד של עומק (ומיגרנה לאלה שרגישים) הוספנו משחק עם הscale שנותן אוירה של קוביה מתרחקת קוביה מתקרבת (קוביה לא מדבר עברית טוב). 😴 רוצים codepen כי התיאור נשמע מסתורי מדי? אני אעלה לכם למטה ממליץ לכם להציץ בו השתמשו בתבונה כי זה בהחלט יכול להיות מטריף. 👑 * לא הכל נתמך בכל הדפדפנים. * השתמשו באנימציות במינון. * טל"ח, עד גמר המלאי, לא כולל חברי מועדון.