ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

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

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

  1. בית
  2. >
  3. Full Stack
10 באוקטובר 2024• זמן קריאה: 1 דקות

תכינו את משקפי התלת מימד: בפוסט הזה ניצור קובייה שמסתובבת לפי גלילת המשתמש, רק בעזרת CSS בלבד. קסם? כמעט.

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

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

בפוסט הזה נלמד על שימוש ב־mix-blend-mode ב־CSS, טכניקת עיצוב מגניבה שמאפשרת לשלב את התוכן של האלמנט עם הרקע והאב בצורה מרהיבה ומיוחדת.

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

@apply ב־Tailwind מאפשר לאחד מספר קלאסים לקלאס אחד, אבל יש לזה יתרונות וחסרונות. למדו איך להשתמש בזה בצורה חכמה ומתי כדאי להימנע.

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

למד איך להשתמש בצבעים ב־Tailwind CSS, כולל הצבעים המובנים, שמות אינטואיטיביים, וריאציות צבעים ודרכים להוסיף ולהתאים אישית את פלטת הצבעים בעזרת הקונפיגורציה.