Comment appliquer correctement plusieurs transformations CSS ?

Application de plusieurs transformations CSS

Les transformations CSS permettent aux développeurs de manipuler des éléments de différentes manières, notamment par translation, rotation et mise à l'échelle. Cependant, lors de l'application de plusieurs transformations à un élément, seule la dernière transformation est généralement exécutée.

Problème :

Dans l'exemple suivant, la transformation de traduction n'est pas appliquée car la transformation de rotation est placée après :

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

Solution :

Pour appliquer plusieurs transformations, elles doivent être placées sur une seule ligne, séparées par des espaces. Les transformations seront appliquées de droite à gauche :

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

Par conséquent, la transformation de rotation sera appliquée en premier, suivie de la translation.

Ordre d'exécution :

Lors de l'application de plusieurs transformations, l'ordre des transformations est important. Par exemple, faire pivoter un élément de 90 degrés puis le redimensionner de 1,5 ne produira pas le même résultat que le redimensionner d'abord puis le faire pivoter.

Considérez la démonstration suivante :

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

Dans dans cet exemple, ".orderOne" apparaîtra pivoté de 90 degrés et mis à l'échelle de 1,5, tandis que ".orderTwo" apparaîtra pivoté de 90 degrés, puis mis à l'échelle de 1,5. Cela démontre que l'ordre de transformation est important et doit être soigneusement pris en compte lors de l'application de plusieurs transformations.

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!