Comment appliquer plusieurs transformations CSS à un élément ?

Transformation d'éléments avec plusieurs propriétés CSS

CSS permet l'application de plusieurs transformations à un élément. Cependant, lorsque vous utilisez la propriété transform plusieurs fois, seule la dernière directive prend effet. Pour appliquer plusieurs transformations, il est nécessaire de les combiner sur une seule ligne.

Exemple :

Dans le CSS suivant, seule la traduction est appliquée à l'élément :

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}

Pour appliquer les deux transformations, combinez-les en une seule ligne :

li:nth-child(2) {
    transform: rotate(15deg) translate(-20px,0px);
}

Ordre de transformation

Plusieurs transformations appliquées sur une seule ligne sont traitées de droite à gauche. Cela signifie que la transformation la plus à droite est appliquée en premier.

Considérez les exemples suivants :

transform: scale(1, 1.5) rotate(90deg);

transform: rotate(90deg) scale(1, 1.5);

Ces deux transformations ne pas produiront le même résultat en raison de la ordre de candidature différent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!