שליטה ברמת פירוט גבוהה יותר על טרנספורמציות CSS עם מאפייני טרנספורמציה נפרדים

טרנספורמציה של רכיבים באמצעות המאפיינים translate,‏ rotate ו-scale

Bramus

L. David Baron

חגיגה: תכונת האינטרנט הזו זמינה עכשיו בכל שלושת מנועי הדפדפן!

תמיכה בדפדפן

• 104
• 104
• 72
• 14.1

מקור

המאפיין transform ב-CSS

כדי להחיל טרנספורמציות על רכיב, משתמשים בנכס transform של CSS. הנכס יכול להכיל <transform-function> אחד או יותר, שיוחלו בזה אחר זה.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

הרכיב המטורגט מוסט ב-50% על ציר X, מסובב ב-30 מעלות ולבסוף משופר ב-120%.

הנכס transform עובד כמו שצריך, אבל לפעמים קצת קשה לשנות את הערכים האלה בנפרד.

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

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

מאפייני הטרנספורמציה הנפרדים

משלוח באמצעות Chrome 104 הוא מאפיינים נפרדים לשינויים בשירות CSS. המאפיינים הם scale,‏ rotate ו-translate, שאפשר להשתמש בהם כדי להגדיר בנפרד את החלקים האלה של טרנספורמציה.

כך, Chrome מצטרף ל-Firefox ול-Safari שכבר תומכים בנכסים האלה.

תמיכה בדפדפנים

• 104
• 104
• 72
• 14.1

מקור

הערה: לא לכל פונקציות הטרנספורמציה יש מאפיין יחיד תואם, לדוגמה skewX() ו-matrix().

כשמעתיקים מחדש את הדוגמה הקודמת של transform עם המאפיינים הנפרדים, קטע הקוד הופך כך:

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

ענייני סדר

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

כשמשתמשים ב-transform, פונקציות הטרנספורמציה חלות בסדר שבו הן נכתבות – משמאל (בחוץ) לימין (בפנים).

כשמשתמשים במאפייני טרנספורמציה ספציפיים, הסדר הוא לא הסדר שבו הם מוצהרים. הסדר הוא תמיד זהה: קודם translate (בחוץ), אחר כך rotate ואז scale (בפנים).

כלומר, שני קטעי הקוד הבאים מניבים את אותה תוצאה:

.transform--individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform--individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

בשני המקרים, הרכיבים המטורגטים יועברו קודם ב-50% על ציר X, לאחר מכן יתבצעו בהם סיבוב ב-30deg ולבסוף יתבצע שינוי קנה המידה שלהם ב-1.2.

אם אחד ממאפייני הטרנספורמציה הספציפיים מוצהר יחד עם מאפיין transform, הטרנספורמציות הספציפיות חלות קודם (translate,‏ rotate ואז scale) והמאפיין transform חל אחרון (בפנים). פרטים נוספים מופיעים במפרט שמגדיר איך צריך לחשב את מטריצת הטרנספורמציה.

אנימציות

הסיבה העיקרית להוספת המאפיינים האלה היא כדי להקל על העבודה עם אנימציות. נניח שאתם רוצים להוסיף אנימציה לרכיב באופן הבא:

שימוש ב-transform

כדי להטמיע את האנימציה הזו באמצעות transform, צריך לחשב את כל הערכים שבין הטרנספורמציות לכל הטרנספורמציות המוגדרות, ולכלול אותם בכל תמונת מפתח. לדוגמה, כדי לבצע רוטציה בנקודה של 10%, צריך לחשב גם את הערכים של שאר הטרנספורמציות, כי כל הערכים האלה נדרשים למאפיין transform.

קוד ה-CSS שמתקבל הופך כך:

@keyframes anim {
  0% { transform: translateX(0%); }
  5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
  10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
  90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
  95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
  100% { transform: translateX(100%) rotate(360deg); }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

שימוש במאפייני טרנספורמציה נפרדים

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

@keyframes anim {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }

  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }

  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: anim 2s;
  animation-fill-mode: forwards;
}

שימוש בתכונות טרנספורמציה בודדות ובמספר תמונות מפתח

כדי ליצור קוד מודולרי, אפשר לפצל כל אנימציה משנית לקבוצה משלה של מפתחות פריימים.

@keyframes move {
  0% { translate: 0% 0; }
  100% { translate: 100% 0; }
}

@keyframes scale {
  0%, 100% { scale: 1; }
  5%, 95% { scale: 1.2; }
}

@keyframes rotate {
  0% { rotate: 0deg; }
  10%, 90% { rotate: 180deg; }
  100% { rotate: 360deg; }
}

.target {
  animation: move 2s, scale 2s, rotate 2s;
  animation-fill-mode: forwards;
}

בזכות הפיצול הזה, אפשר להחיל כל קבוצה נפרדת של נקודות מפתח כרצונכם, כי מאפייני transform – שהפכו עכשיו לנכסים נפרדים – כבר לא מחליפים זה את זה. בנוסף, אפשר לתת לכל טרנספורמציה תזמון שונה בלי שתצטרכו לכתוב מחדש את הכול.

ביצועים

אנימציות שמשתמשות בנכסים החדשים האלה יעילות באותה מידה כמו אנימציות של הנכס הקיים transform.

אנימציות של translate,‏ rotate ו-scale פועלות במעבד הקומפוזיציה באותו אופן שבו פועלות אנימציות של transform, כך שהן טובות לביצועים של אנימציה באותו אופן שבו transform טוב.

הנכסים החדשים האלה פועלים גם עם הנכס will-change. באופן כללי, מומלץ להימנע משימוש מוגזם ב-will-change. לשם כך, צריך להשתמש בו במספר המינימלי של הרכיבים הנדרשים, ולמשך פרק הזמן הקצר ביותר האפשרי. עם זאת, כדאי גם להיות ספציפיים ככל האפשר. לדוגמה, אם אתם משתמשים ב-will-change כדי לבצע אופטימיזציה של אנימציה באמצעות המאפיינים rotate ו-filter, עליכם להצהיר על כך באמצעות will-change: rotate, filter. השיטה הזו טובה יותר מאשר שימוש ב-will-change: transform, filter במקרה שבו אתם יוצרים אנימציה של rotate ו-filter, כי חלק ממבני הנתונים ש-Chrome יוצר מראש כשמשתמשים ב-will-change שונים עבור transform לעומת rotate.

חלק מהסדרה 'חדשים עם יכולת פעולה הדדית'