Comment appliquer plusieurs transformations en CSS ?

Question

Comment puis-je appliquer plusieurs transform à l'aide de CSS ?

Exemple : ce qui suit s'applique uniquement à la translation, pas à la rotation.

li:nth-child(2) {
    transformation : rotation (15 degrés) ;
    transformer : traduire (-20px,0px);
}

Answer 1

J'ajoute cette réponse non pas parce qu'elle pourrait être utile, mais parce qu'elle est vraie.

En plus d'utiliser les réponses existantes expliquant comment effectuer plusieurs traductions via des liens, vous pouvez construire vous-même la matrice 4x4

J'ai montré la matrice de rotation de un site aléatoire que j'ai trouvé en cherchant sur Google :

Rotation autour de l'axe x :
Rotation autour de l'axe y :
Rotation autour de l'axe z :

Je n'ai pas trouvé de bon exemple de traduction, donc en supposant que je m'en souvienne/comprends correctement, la traduction :

[1 0 0 0]
[0 1 0 0]
[0 0 1 0]
[x y z 1]

Voir l'article Wikipédia sur les transformations et le Tutoriel Pragamatic CSS3 qui explique très bien cela. Un autre guide que j'ai trouvé qui explique les matrices de rotation arbitraires est Notes d'Egon Rath sur les matrices

Bien sûr, la multiplication matricielle est possible entre ces matrices 4x4, donc pour effectuer des rotations et des traductions, vous devez créer la matrice de rotation appropriée et la multiplier par la matrice de traduction.

Cela vous donne plus de liberté pour bien faire les choses et rend également presque impossible à quiconque de comprendre ce qu'il fait, y compris vous pendant cinq minutes.

Mais, vous savez, ça marche.

Edit : Je viens de réaliser que j'ai raté probablement l'utilisation la plus importante et la plus pratique, à savoir la création étape par étape de transformations 3D complexes via JavaScript, où les choses auraient beaucoup plus de sens.

Answer 2

Vous devez les mettre sur une seule ligne comme ceci :

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

Lorsque vous avez plusieurs instructions de transformation, seule la dernière est appliquée. Comme n'importe quelle autre règle CSS.

---

N'oubliez pas que plusieurs transformations sur une même ligne sont appliquées de droite à gauche.

Ceci :变换：scale(1,1.5)rotate(90deg);
et : 变换：旋转(90deg)缩放(1,1.5);

ne produira pas le même résultat :

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

<div class="orderOne">
  A
</div>

<div class="orderTwo">
  A
</div>