Transformer des éléments avec les propriétés translate, rotate et scale
Propriété CSS transform
Pour appliquer des transformations à un élément, utilisez la propriété CSS transform. La propriété accepte un ou plusieurs éléments <transform-function> qui sont appliqués l'un après l'autre.
.target {
transform: translateX(50%) rotate(30deg) scale(1.2);
}
L'élément ciblé est traduit de 50% sur l'axe X, pivoté de 30 degrés, puis finalement ajusté à 120%.
Bien que la propriété transform fonctionne très bien, la modification individuelle de n'importe laquelle de ces valeurs devient un peu fastidieuse.
Pour modifier l'échelle lors du survol, vous devez dupliquer toutes les fonctions de la propriété de transformation, 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
L'envoi avec Chrome 104 est une propriété individuelle des transformations CSS. Les propriétés sont scale, rotate et translate. Elles vous permettent de définir individuellement ces parties d'une transformation.
De cette façon, Chrome rejoint Firefox et Safari, qui acceptent déjà ces propriétés.
En réécrivant 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
L'une des principales différences entre la propriété CSS transform d'origine et les nouvelles propriétés réside dans 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 ne correspond pas à l'ordre dans lequel elles sont déclarées. L'ordre est toujours le même: d'abord translate (à l'extérieur), puis rotate, puis scale (à l'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, puis 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 le mode de calcul de la matrice de transformation.
Animations
Ces propriétés ont été ajoutées pour faciliter les animations. Supposons que vous souhaitiez animer un élément comme suit:
Utiliser transform
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 au niveau de la marque de 10 %, les valeurs des autres transformations doivent également être calculées, car la propriété transform a besoin de toutes ces valeurs.
Le code CSS obtenu devient le suivant:
@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 les propriétés de transformation individuelles, l'écriture est beaucoup plus facile. Au lieu de faire glisser toutes les transformations d'une image clé à une autre, vous pouvez cibler chaque transformation individuellement. Vous n'avez plus non 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 images clés
Pour rendre votre code modulaire, vous pouvez diviser chaque sous-animation en un ensemble d'images clés qui lui est propre.
@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 distinct d'images clés comme vous le souhaitez, car les propriétés transform (qui sont désormais devenues des propriétés individuelles) ne s'écrasent plus. Par ailleurs, vous pouvez attribuer une chronologie différente à chaque transformation sans avoir à la réécrire entièrement.
Performances
Les animations qui utilisent 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 celles de transform. Elles offrent donc de bonnes performances d'animation tout comme transform.
Ces nouvelles propriétés fonctionnent également avec la propriété will-change. En général, il est préférable d'éviter d'utiliser will-change sur un nombre minimal d'éléments nécessaires et pour 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 méthode est légèrement préférable à will-change: transform, filter si vous animez rotate et filter, car certaines structures de données que Chrome crée à l'avance lorsque vous utilisez will-change sont différentes pour transform et rotate.
Fait partie de la série sur les nouvelles technologies interopérables