אפשר לשנות אלמנטים באמצעות המאפיינים translate
, rotate
ו-scale
נכס ה-CSS transform
כדי להחיל המרות על רכיב, צריך להשתמש במאפיין 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, שכבר תומכים בנכסים האלה.
אם תשכתבו את הדוגמה הקודמת (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
.