Właściwości poszczególnych przekształceń

Właściwość transform umożliwia stosowanie wielu przekształceń w określonej kolejności, ale wszelkie zmiany w pojedynczym przekształceniu wymagają ponownego określenia całego łańcucha przekształceń. Utrudnia to animowanie lub przechodzenie pojedynczego przekształcenia.

Poszczególne właściwości przekształcenia CSS (translate, rotate i scale) umożliwiają stosowanie przekształceń niezależnie od właściwości transform. Dzięki temu łatwiej jest zastąpić pojedyncze przekształcenie, na przykład w przypadku :hover.

Najważniejsze szczegóły implementacji

Właściwości poszczególnych przekształceń są zawsze stosowane w ustalonej kolejności, niezależnie od ich kolejności w kodzie CSS:

1. translate
2. rotate
3. scale
4. transform (zastosowano ostatnio)

Jeśli potrzebujesz innej kolejności (np. skalowanie przed obracaniem), musisz nadal używać funkcji właściwości transform.

Funkcje przekształcania nie zastępują poszczególnych właściwości przekształcania. Innymi słowy, scale: 2; transform: scale(3); najpierw zostanie przeskalowany 2-krotnie, a następnie 3-krotnie, co da łącznie 6-krotne powiększenie.

Zapobieganie nieoczekiwanym zmianom w kontekstach stosu i blokach zawierających

Właściwość transform i poszczególne właściwości przekształcenia wpływają na układ i renderowanie strony oraz mogą powodować nieoczekiwane działanie indeksu Z lub pozycjonowania kotwicy. OBOWIĄZKOWE: jeśli element może mieć zastosowane przekształcenie w ramach zmiany stanu, np. :hover, przejścia lub animacji, zastosuj przekształcenie tożsamości do elementu podstawowego. Dzięki temu kontekst stosu i zawartość elementu nie zmieniają się po zastosowaniu przekształcenia.

.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;
}

Niezależne animacje i przejścia

Główną zaletą jest możliwość definiowania nakładających się animacji lub przejść, które są kierowane na różne właściwości bez konfliktów.

.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; }
}

Strategie zastępcze

W przypadku przeglądarek, które nie obsługują poszczególnych właściwości przekształcenia, użyj tradycyjnej właściwości transform. Pamiętaj, że jeśli chcesz zmodyfikować jedną część w innym stanie, musisz ponownie zadeklarować cały stos przekształceń.

.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;
  }
}