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

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

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

פרטי ההטמעה העיקריים

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

1. translate
2. rotate
3. scale
4. ‫transform (הוחל אחרון)

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

פונקציות הטרנספורמציה לא מבטלות את מאפייני הטרנספורמציה הנפרדים. במילים אחרות, scale: 2; transform: scale(3); יגדיל קודם פי 2, ואז שוב פי 3, ובסך הכל פי 6.

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

המאפיין transform ומאפייני הטרנספורמציה הנפרדים משפיעים על הפריסה והעיבוד של הדף, ועלולים לגרום להתנהגות בלתי צפויה עם z-index או מיקום העוגן. חובה: אם יכול להיות שיוחל שינוי צורה על רכיב כחלק משינוי מצב כמו :hover, או מעבר או אנימציה, צריך להחיל שינוי צורה של זהות על רכיב הבסיס. כך אפשר לוודא שההקשר של סידור הרכיבים בערימה וההכלה שלהם לא משתנים כשמפעילים טרנספורמציה.

.element{
  /* MANDATORY: Apply identity transformations for properties that will
     change on state changes (like :hover). This prevents unexpected layout
     or z-index shifts caused by creating a new stacking context only on hover. */
  translate: 0px;
  rotate: 0deg;
  scale: 1;
}
.element:hover{
  translate: 10px 10px;
  rotate: 20deg;
  scale: 0.8;
}

אנימציות ומעברים נפרדים

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

.card {
  /* Define independent animations that don't overwrite each other */
  animation: float 3s infinite ease-in-out;
  
  /* Transition only the scale property for hover states */
  transition: scale 0.3s ease;

  /* Establish the base scale to prevent a sudden stacking context shift when transitioning on hover. */
  scale: 1;
}

.card:hover {
  /* Only the scale changes; the 'float' animation (translate) continues uninterrupted */
  scale: 1.05;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

אסטרטגיות חלופיות

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

.element {
  /* Base transform */
  transform: translate(100px, 0) rotate(45deg);
  /* Specify the identity for the scale property. */
  scale: 1;
}

@supports not (translate: 0px) {
  .element:hover {
    /* Fallback: Must repeat translate and rotate even if only scale changes */
    transform: translate(100px, 0) rotate(45deg) scale(1.1);
  }
}

@supports (translate: 0px) {
  .element:hover {
    /* Modern: Only declare the change */
    scale: 1.1;
  }
}