קסם תלת-מימדי ב-CSS: סיבוב אלמנטים בסטייל של קלף הפתעה!

לסובב אלמנטים עם אפקט תלת מימד בעזרת css, מסך וחשמל. 👨‍👩‍👧‍👧 ואני מתייחס לסיבוב סטייל משחק זיכרון, קלף הפתעה, פרסומת מסתובבת, דלת מסתובבת ואתם מתחילים להבין את הכוונה... 🤓 ושנהיה על אותו קו נתחיל מהcodepen

שימו לב שהjs שבדוגמא הוא (היא?) רק כדי לא לכתוב קוד חוזר בצורה דוחה וגועלית אבל הוא לא נצרך לאנימציה עצמה. כמו כן בדוגמא האנימציה מופיעה בhover, כי זה מה שעלה לי בראש (או בלחיצה אם אתם על mobile). אבל כמובן שאפשר להפעיל אותה בכל פעולה שתרצו. מה גורם לזה לפעול אבל??? 👺 כמה הגדרות שמשתלבות אחת בשניה כמו אבנים של מדרכה או אננס על פיצה (איכס אנשים מוזרים). 1. perspective: 1000px; 2. transform-style: preserve-3d; 3. backface-visibility: hidden; 4. transform: rotateY(180deg); וכמובן ההגדרה שמשתנה בhover 🤓 שימו לב כמו כן לסדר האלמנטים : card - card-inner - card-front - card-back ⚠ מה כל דבר עושה? יש לכם את הcodepen שחקו קצת בארבעת המשפטים למעלה ותגיבו מה לדעתכם עושה כל דבר? 😋 (שמתם לב איך אני מנסה לסחוט ממכם אינגייג'מנט? 🐔 - ותוך כדי חוסך הקלדה) האנימציה הפריכה והקראנצ'ית הזו דיי עוזרת במקרים מסוימים, ומיותרת לחלוטין בשאר - אז השתמשו בה שימוש הוגן כמו כל אנימציה. שיהיה יום מגניב ומלא אור אושר ועליזות לכולכם. ♥♥ ולכל הנבלות שהרסו לנו את השנה: אולקוס, מיגרנות, פיצעי לחץ במרפק, סכרת נעורים, שלבקת חוגרת וציפורן חודרנית במעי הגס.