Contrôle plus précis des transformations CSS grâce à des propriétés de transformation individuelles

Transformer des éléments avec les propriétés translate, rotate et scale

Bramus
L. David Baron

Propriété CSS transform

Pour appliquer des transformations à un élément, utilisez la propriété CSS transform. La propriété accepte une ou plusieurs <transform-function> qui sont appliquées les unes après les autres.

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

L'élément ciblé est déplacé de 50 % sur l'axe X, pivoté de 30 degrés et enfin mis à l'échelle de 120 %.

Bien que la propriété transform fonctionne parfaitement, elle devient un peu fastidieuse lorsque vous souhaitez modifier l'une de ces valeurs individuellement.

Pour modifier l'échelle lorsque vous pointez sur la carte, vous devez dupliquer toutes les fonctions de la propriété "transform", même si leurs valeurs restent inchangées.

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

Les propriétés de transformation individuelles

Les propriétés individuelles pour les transformations CSS sont disponibles avec Chrome 104. Les propriétés sont scale, rotate et translate, que vous pouvez utiliser pour définir individuellement ces parties d'une transformation.

Chrome rejoint ainsi Firefox et Safari, qui sont déjà compatibles avec ces propriétés.

Navigateurs pris en charge

  • Chrome : 104.
  • Edge : 104.
  • Firefox : 72.
  • Safari : 14.1.

Source

Si vous réécrivez l'exemple transform précédent avec les propriétés individuelles, votre extrait devient le suivant :

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

De l'importance de l'ordre des modificateurs

Une différence clé entre la propriété CSS transform d'origine et les nouvelles propriétés est l'ordre dans lequel les transformations déclarées sont appliquées.

Avec transform, les fonctions de transformation sont appliquées dans l'ordre dans lequel elles sont écrites, de gauche (extérieur) à droite (intérieur).

Avec les propriétés de transformation individuelles, l'ordre n'est pas celui dans lequel elles sont déclarées. L'ordre est toujours le même: d'abord translate (extérieur), rotate, puis scale (intérieur).

Cela signifie que les deux extraits de code suivants donnent le même résultat :

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

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

Dans les deux cas, les éléments ciblés sont d'abord traduits de 50% sur l'axe X, puis pivotés de 30deg et enfin mis à l'échelle de 1.2.

Si l'une des propriétés de transformation individuelles est déclarée avec une propriété transform, les transformations individuelles sont appliquées en premier (translate, rotate, puis scale) avec la transform en dernier (à l'intérieur). Pour en savoir plus, consultez la spécification qui définit la méthode de calcul de la matrice de transformation.

Animations

La principale raison de l'ajout de ces propriétés est de faciliter les animations. Imaginons que vous souhaitiez animer un élément comme suit:

Graphique des images clés.

transform utilisé(s)

Pour implémenter cette animation à l'aide de transform, vous devez calculer toutes les valeurs intermédiaires pour toutes les transformations définies, et les inclure dans chaque image clé. Par exemple, pour effectuer une rotation à 10 %, les valeurs des autres transformations doivent également être calculées, car la propriété transform en a besoin.

Graphique des images clés avec des valeurs intermédiaires calculées.

Le code CSS obtenu se présente comme suit :

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

Utiliser des propriétés de transformation individuelles

Avec des propriétés de transformation individuelles, l'écriture devient beaucoup plus facile. Au lieu de faire glisser toutes les transformations de l'image clé vers l'image clé, vous pouvez cibler chaque transformation individuellement. Vous n'avez plus besoin de calculer toutes ces valeurs intermédiaires.

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

Utiliser des propriétés de transformation individuelles et plusieurs clés-images

Pour rendre votre code modulaire, vous pouvez diviser chaque sous-animation en son propre ensemble d'images clés.

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

Grâce à cette division, vous pouvez appliquer chaque ensemble de clés-images distinct comme vous le souhaitez, car les propriétés transform (qui sont désormais des propriétés individuelles) ne s'écrasent plus les unes les autres. Au-delà, vous pouvez définir un calendrier différent pour chaque transformation sans avoir à tout réécrire.

Performances

Les animations utilisant ces nouvelles propriétés sont tout aussi efficaces que les animations de la propriété transform existante.

Les animations de translate, rotate et scale s'exécutent sur le compositeur de la même manière que les animations de transform. Elles sont donc efficaces pour les performances d'animation, tout comme transform.

Ces nouvelles propriétés fonctionnent également avec la propriété will-change. En règle générale, il est préférable d'éviter d'utiliser will-change de manière excessive en l'appliquant au nombre minimal d'éléments nécessaire et pendant une durée aussi courte que possible. Mais il est également bon d'être aussi précis que possible. Par exemple, si vous utilisez will-change pour optimiser une animation avec les propriétés rotate et filter, vous devez le déclarer à l'aide de will-change: rotate, filter. Cette approche est légèrement meilleure que l'utilisation de will-change: transform, filter lorsque vous animez rotate et filter, car certaines des structures de données que Chrome crée à l'avance lorsque vous utilisez will-change sont différentes pour transform et rotate.

Partie de la série "Nouveaux interopérabilités"