Comment appliquer plusieurs transformations en CSS?

605

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);        
}
Ben
la source

Réponses:

996

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>

lukad
la source
55
J'ai essayé de les séparer par un "," comme c'est fait avec plusieurs ombres, mais cela n'a pas fonctionné. Je vous remercie.
Ben
2
est-il possible d'appliquer une transformation avant l'autre ... comme l'inclinaison avant rotation. Quant à moi, peu importe ce que je fais, l'élément est d'abord tourné, puis biaisé, ce qui donne quelque chose qui n'est pas ce que je veux.
Muhammad Umer
2
donc maintenant pour les diviser en plusieurs lignes
aWebDeveloper
2
transformer: translate (100px, 100px) rotation (45deg) translate (100px, 100px) rotation (45deg); est égal à transformer: traduire (200px, 200px) tourner (90deg), le dernier ajoutera
bigCat
3
@ jave.web, vous vouliez dire de droite à gauche , n'est -ce pas? Pour transform: scale(1,1.5) rotate(90deg);, la rotation se produirait avant l'échelle.
Jargs
43

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 x
Rotation autour de l'axe y: Rotation autour de l'axe y
Rotation autour de l'axe z: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.

Jeff
la source
3
Le "site aléatoire" de mines.edu est malheureusement devenu un lien mort.
Matt Sach du
1
Tout comme le lien 9elements :(
Matt Sach
1
@MattSach Ok, apparemment "plus tard dans la journée" signifie pour moi "six mois plus tard", mais au moins le lien 9elements est corrigé (quelqu'un d'autre a corrigé le lien des sites aléatoires avec Wayback, et j'ai suivi leur exemple.)
Jeff
1
J'ai également fait cela pour vous aider à les comprendre.
alex
6
cela ne rentre vraiment pas dans ce sujet
user151496
24

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.

richtelford
la source
Vous oubliez letransform-style: preserve-3d
Jack Giffin
Ce n'est pas essentiel pour les transformations 2d imbriquées - dépend du résultat souhaité. L'origine transformée sera très probablement utile.
richtelford
21

Vous pouvez appliquer plusieurs transformations comme ceci:

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

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.

schellmax
la source
1

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 >>

Alireza
la source
0

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>

Vinkal
la source