כיצד ליצור 3D לחצן Flip אנימציות עם

להעיף אנימציות הם אפקטים פופולריים CSS להראות הן הקדמי והן את הגב של אלמנט HTML על ידי הפיכתם מלמעלה למטה, או משמאל לימין (ולהיפך). הם rad ב 2 מימדים, אבל הם אפילו קריר יותר כאשר מבוצע ב -3 D..

במאמר זה, אני אראה לך איך ליצור לחצני 3D פשוטה, ו להוסיף אנימציות להעיף להם.

אתה יכול לראות את התוצאה על הדגמה להלן, אם תלחץ על הכפתורים, הם יבצעו את האנימציה מתויג להעיף.

1. יצירת HTML עבור כפתור 3D

כדי ליצור כפתור 3D (עם למעלה → התחתונה להעיף), תחילה אנחנו מחסנית שלוש

זה על זה, שניים על הפנים הקדמיות והאחוריות של הכפתור, ושלישית למילוי עומק באמצע. אנחנו שמים את שלושת הכפתורים בפנים .flipBtn מיכל זה יפעל כמו כפתור 3D, ואנחנו למקם את הלחצן 3D לתוך .FlipBtnWrapper עטיפה.

2. הוספת סגנונות בסיסיים עם CSS

קבענו את רוחב ו גובה תכונות של מעטפת, כפתור, ואת הכפתור פרצופים, ומיקומם באמצעות טכניקה מיקום / מוחלט מוחלט.

 .flipBtnWrapper width: 200px; גובה: 200px; מקומות קרובים . FlipBtn, .flipBtn_face width: 100%; גובה: 100%; תפקיד מוחלט

.3 סמנו את 3 הכפתורים

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

הפנים האמצעיים, .flipBtn_mid, ניתן גובה של 20px, ואת אותו שטח של 20px נוצר בין הפנים הקדמיות והאחוריות. אנו משיגים את השני באמצעות תרגם () פונקציית CSS זה מזיז אלמנט לאורך ציר ה- z. אנחנו דוחפים את הגב לאחור על ידי 10px, ולהביא את הפנים הקדמיות קדימה על ידי 10px.

 .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), ליניארי- gradient (# FF6366 50%, # FEA56E); backface-visibility: מוסתר; להפוך: translateZ (10px);  .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), שיפוע ליניארי (# FF6366 50%, # FEA56E); צבע רקע: כחול; להפוך: translateZ (-10px);  .flipBtn_mid height: 20px; צבע רקע: # d5485a; transform: rotateX (90deg); top: -10px;

ל לכסות את החלל בין הפנים הקדמיות והאחוריות עם הפנים האמצעיות, אנחנו להניח את הפנים האמצעיים על פני המטוס x של שטח 3D באמצעות transform: rotateX (90deg); הכלל עושה את זה בניצב הן על הלחצנים הקדמיים והן על הכפתור האחורי במישור ה- y.

כיוון שהפנים האמצעיות היו מונחות על משטח ה- x, נקודתו העליונה על ציר ה- y עוברת 10 פיקסלים (מחצית מגובהו) מהמקור. אז, כדי למשוך אותו בחזרה ליישר את הדף עם שני הכפתורים האחרים, הוספתי top: -10px גם כן.

השתמשתי חזרה מאפיין CSS עבור הפנים הקדמיות, ולכן כאשר אנו להעיף את הכפתור, החלק האחורי של הפנים הקדמיים לא יהיה גלוי.

עד כה, תוכלו לראות רק את הפנים הקדמיות על המסך, כמו המטוס x מוסתר מהעין, ועל המטוס y (המסך) את הפנים האחרונות הניח היה הקדמי. על ידי סיבוב הכפתור תוכל לראות את הפנים האחרות גם כן.

.4 סיבוב הכפתור

המאפיין CSS בסגנון CSS קובע אם האלמנטים צאצאיים של אלמנט HTML מוצגים שטוחים או ממוקמים במרחב התלת-ממד. בקטע הקוד להלן, סגנון המרה: שימור-3D; הכלל נותן נפח 3D על הכפתור שלנו, בעוד transform: rotatexX () הרכוש מסובב אותו סביב ציר ה- x.

 .flipBtn transform-style: preserve-3d; transformat: rotateX (-120deg);

שים לב שהשתמשתי -120 מעלות אך ורק למטרות הדגמה, מכיוון שכך קל יותר להדגים כיצד פועל סיבוב הכפתור.

עם זאת, בשלב הבא נשנה את זה -180 מעלות כדי להפוך את הכפתור לגמרי להעיף מסביב.

5. הנפשת הכפתור

בשלב זה, כפתור 3D שלנו עדיין לא אנימציה. אנחנו יכולים לעשות זאת באמצעות המעבר נכס. אנו משתמשים שינוי צורה רכוש עבור הערך הראשון, שכן זהו הנכס שאנו רוצים להחיל את אפקט המעבר עבור. הערך השני, הוא משך, 2s.

בוא נעשה את הלחצן רק לסובב על העכבר, אז במקום .flipBtn בחר, בוא נשתמש .מעבר בריחוף. FlipBtn. כאמור, גם לשנות את הערך של rotateX () ל -180 מעלות כדי להפוך את הכפתור להעיף סביב.

 .flipBtn מעבר: להפוך 2s; סגנון המרה: שימור-3D; . FlipBtnWrapper: רחף. FlipBtn transform: rotateX (-180deg);

שים לב כי את ריפו Github, אני הוסיף תיבת סימון לכל כפתור על מנת לירות את האנימציה ב : מסומנת ולא על : רחף, ככה זה מתנהג יותר כמו כפתור אמיתי. כללתי גם ארבעה לחצנים שונים עם ארבעה כיוונים להעיף (למעלה → תחתון, תחתון → למעלה, ימין → שמאל ושמאל → ימין), כך שאתה יכול בקלות להשתמש לפי מה שאתה רוצה.

הצג הדגמה
הורד מקור