Comment appliquer plusieurs transformations en CSS?

En utilisant CSS, comment puis-je en appliquer plusieurs transform?

Exemple: Dans ce qui suit, seule la translation est appliquée, pas la rotation.

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

Vous devez les mettre sur une seule ligne comme celle-ci:

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

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

Gardez à l'esprit que plusieurs directives de transformation d'une ligne sont appliquées de droite à gauche .

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

ne pas produire 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>

J'ajoute cette réponse non pas parce qu'elle sera probablement utile, mais simplement parce que c'est vrai.

En plus d'utiliser les réponses existantes expliquant comment faire plus d'une traduction en les enchaînant, vous pouvez également construire vous-même la matrice 4x4

J'ai attrapé l'image suivante à partir d' un site aléatoire que j'ai trouvé lors de la recherche sur Google qui montre des matrices de rotation:

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

Je n'ai pas pu trouver un bon exemple de traduction, donc en supposant que je m'en souvienne / je comprenne bien, la traduction:

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

Voir plus sur l'article Wikipedia sur la transformation ainsi que le tutoriel Pragamatic CSS3 qui l'explique plutôt bien. Un autre guide que j'ai trouvé qui explique les matrices de rotation arbitraires est les notes d'Egon Rath sur les matrices

La multiplication matricielle fonctionne bien sûr entre ces matrices 4x4, donc pour effectuer une rotation suivie d'une translation, vous faites la matrice de rotation appropriée et la multipliez par la matrice de traduction.

Cela peut vous donner un peu plus de liberté pour bien faire les choses, et il sera également pratiquement impossible pour quiconque de comprendre ce qu'il fait, y compris vous en cinq minutes.

Mais, tu sais, ça marche.

Edit: Je viens de réaliser que j'ai manqué de mentionner probablement l'utilisation la plus importante et la plus pratique de cela, qui est de créer progressivement des transformations 3D complexes via JavaScript, où les choses auront un peu plus de sens.

Vous pouvez également appliquer plusieurs transformations à l'aide d'une couche supplémentaire de balisage, par exemple:

<h3 class="rotated-heading">
    <span class="scaled-up">Hey!</span>
</h3>
<style type="text/css">
.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}
</style>

Cela peut être très utile lors de l'animation d'éléments avec des transformations à l'aide de Javascript.

Vous pouvez appliquer plusieurs transformations comme ceci:

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

Dans le futur, nous pouvons l'écrire comme ceci:

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

Cela deviendra particulièrement utile lors de l'application de classes individuelles sur un élément:

<div class="teaser important"></div>

.teaser{rotate:10deg;}
.important{scale:1.5 1.5;}

Cette syntaxe est définie dans la spécification CSS Transforms niveau 2 en cours , mais ne trouve rien sur la prise en charge actuelle du navigateur autre que Chrome Canary. J'espère qu'un jour je reviendrai et mettrai à jour le support du navigateur ici;)

Vous avez trouvé dans cet article les informations que vous voudrez peut-être consulter concernant les solutions de contournement pour les navigateurs actuels.

Commencez à partir de là qu'en CSS , si vous répétez 2 valeurs ou plus, toujours la dernière est appliquée, à moins d'utiliser la !importantbalise, mais en même temps évitez d'en utiliser !importantautant que possible, donc dans votre cas, c'est le problème, donc la seconde transformer remplacer le premier dans ce cas ...

Alors, comment pouvez-vous faire ce que vous voulez alors? ...

Ne vous inquiétez pas , transform accepte plusieurs valeurs en même temps ... Donc, ce code ci-dessous fonctionnera:

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

Si vous aimez jouer avec la transformation, exécutez l'iframe de MDN ci-dessous:

<iframe src="https://interactive-examples.mdn.mozilla.net/pages/css/transform.html" class="interactive  " width="100%" frameborder="0" height="250"></iframe>

Regardez le lien ci-dessous pour plus d'informations:

<< Transformation CSS >>

Transformez Rotate and Translate en une seule ligne css: -Comment?

div.className{
    transform : rotate(270deg) translate(-50%, 0);    
    -webkit-transform: rotate(270deg) translate(-50%, -50%);    
    -moz-transform: rotate(270deg) translate(-50%, -50%);    
    -ms-transform: rotate(270deg) translate(-50%, -50%);    
    -o-transform: rotate(270deg) translate(-50%, -50%); 
    float:left;
    position:absolute;
    top:50%;
    left:50%;
    }

<html>
<head>
</head>
<body>
<div class="className">
  <span style="font-size:50px">A</span>
</div>
</body>
</html>