Proprietà di trasformazione individuali

La proprietà transform consente di applicare più trasformazioni in un ordine specificato, ma qualsiasi modifica a una singola trasformazione richiede di specificare nuovamente l'intera catena di trasformazioni. Questo rende difficile animare o applicare una transizione a una singola trasformazione.

Le singole proprietà di trasformazione CSS (translate, rotate e scale) ti consentono di applicare le trasformazioni indipendentemente dalla proprietà transform. Questo approccio semplifica l'override di una singola trasformazione, ad esempio su :hover.

Dettagli chiave dell'implementazione

Le singole proprietà di trasformazione vengono sempre applicate in un ordine fisso, indipendentemente dal loro ordine nel CSS:

1. translate
2. rotate
3. scale
4. transform (applicato per ultimo)

Se hai bisogno di un ordine diverso (ad es. ridimensionamento prima della rotazione), devi continuare a utilizzare le funzioni della proprietà transform.

Le funzioni di trasformazione non sostituiscono le singole proprietà di trasformazione. In altre parole, scale: 2; transform: scale(3); verrà prima scalato di 2 volte, poi di altre 3 volte, per un totale di 6 volte.

Prevenire modifiche impreviste nei contesti di impilamento e nei blocchi contenitori

La proprietà transform e le singole proprietà di trasformazione influiscono sul layout e sul rendering della pagina e possono causare comportamenti imprevisti con lo z-index o il posizionamento dell'ancoraggio. OBBLIGATORIO: se a un elemento può essere applicata una trasformazione nell'ambito di una modifica dello stato, ad esempio :hover, o di una transizione o animazione, applica una trasformazione di identità all'elemento di base. In questo modo, il contesto di impilamento e il contenimento dell'elemento non cambiano quando viene applicata una trasformazione.

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

Animazioni e transizioni indipendenti

Il vantaggio principale è la possibilità di definire animazioni o transizioni sovrapposte che hanno come target proprietà diverse senza conflitti.

.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 di riserva

Per i browser che non supportano le singole proprietà transform, utilizza la proprietà transform tradizionale. Tieni presente che ciò richiede la nuova dichiarazione dell'intero stack di trasformazione se vuoi modificare una parte in uno stato diverso.

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