Comment appliquer plusieurs transformations CSS sur une seule ligne et quel est l'ordre d'application ?

Application de plusieurs transformations CSS sur une seule ligne

En CSS, vous pouvez appliquer plusieurs transformations à un élément simultanément. Cependant, si vous fournissez plusieurs directives de transformation, seule la dernière sera appliquée.

Pour appliquer plusieurs transformations sur une seule ligne, concaténez-les avec des espaces :

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

Ordre de Application

Il est crucial de noter que plusieurs transformations sont appliquées de droite à gauche. Cela signifie que l'ordre des transformations est important, car :

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

est différent de :

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

Exemple

Considérez l'exemple suivant :

.orderOne, .orderTwo {
    font-family: sans-serif;
    font-size: 22px;
    color: #000;
    display: inline-block;
}

.orderOne {
    transform: scale(1, 1.5) rotate(90deg);
}

.orderTwo {
    transform: rotate(90deg) scale(1, 1.5);
}

Vous pouvez observer la différence en appliquant les transformations dans des ordres différents.

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!