Comment appliquer plusieurs transformations dans CSS?

j'ajoute cette réponse non pas parce qu'elle est susceptible d'être utile, mais juste 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 la matrice 4x4 vous-même

j'ai saisi l'image suivante de un site aléatoire que j'ai trouvé en googlant qui montre des matrices de rotation:

Rotation autour de l'axe des abscisses:

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 me souviens / comprendre correctement, traduction:

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

voir plus sur le article Wikipedia sur la transformation ainsi que le tutoriel pragmatique CSS3 qui l'explique assez bien. Un autre guide que j'ai trouvé qui explique les matrices de rotation arbitraire est Egon Rath notes sur les matrices

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

Cela peut vous donner un peu plus la liberté pour l'obtenir juste, et sera aussi à peu près complètement impossible pour quiconque de comprendre ce qu'il fait, y compris vous dans cinq minutes.

Mais, tu sais, ça marche.

Edit: je viens de réaliser que je n'ai pas mentionné probablement l'utilisation la plus importante et pratique de cette, 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 en utilisant une couche supplémentaire de markup 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 pour animer des éléments avec des transformations en utilisant Javascript.

, Vous pouvez appliquer plus d'une transformation comme ceci:

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

une façon simple d'appliquer la transformation multiple est celle-ci

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

mais aussi n'oubliez pas que vous devez ajouter préfixe pour le laisser fonctionner dans tous les navigateurs comme certains browers comme safari, C'est à dire ne supporte pas la propriété tranform sans préfixe.

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

il suffit de commencer par là que dans CSS , si vous répétez 2 valeurs ou plus, toujours la dernière est appliquée, sauf si vous utilisez !important étiquette, mais en même temps éviter d'utiliser !important autant que vous le pouvez, donc dans votre cas, c'est le problème, de sorte que la deuxième transformation outrepasser la première dans ce cas...

alors comment faire ce que vous voulez?...

Ne vous inquiétez pas , transformer 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 transform, 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:

< < CSS transform > >

par exemple

-webkit-transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
transform: rotateX(-36.09deg) rotateY(-52.71deg) scaleX(1.3) scaleY(1.3) translateY(31px) ;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;

j'utilise enjoycss tool

http://enjoycss.com/5C#transform

il génère le code css pour les paramètres requis de transformation en utilisant GUI pour générer le code transfrom;)