web-dev-qa-db-fra.com

Comment appliquer plusieurs transformations en CSS?

En utilisant CSS, comment puis-je appliquer plus d'une transform?

Exemple: Dans la suite, seule la translation est appliquée, pas la rotation.

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

Vous devez les mettre sur une ligne comme ceci:

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

Lorsque vous avez plusieurs directives de transformation, seul le dernier sera appliqué. C'est comme n'importe quel autre attribut CSS.

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

This: transform: scale(1,1.5) rotate(90deg);
et: transform: rotate(90deg) scale(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>
852
lukad

J'ajoute cette réponse non pas parce que cela pourrait être utile, mais simplement parce que c'est vrai.

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

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

Rotation autour de l'axe x: Rotation around x axis
Rotation autour de l’axe des y: Rotation around y axis
Rotation autour de l'axe z: Rotation around z axis

Je ne pouvais pas trouver un bon exemple de traduction, donc en supposant que je m'en souvienne/comprenne bien, 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 Pragamatic CSS3 qui l'explique assez bien. Un autre guide que j'ai trouvé et qui explique les matrices de rotation arbitraire est Notes d'Egon Rath sur les matrices

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

Cela peut vous donner un peu plus de liberté pour bien faire les choses, mais aussi rendre tout à fait impossible à quiconque de comprendre ce que vous faites, y compris à vous en cinq minutes.

Mais vous savez, ça marche.

Edit: Je viens de me rendre compte que je n’avais pas mentionné l’utilisation probablement la plus importante et la plus pratique de cette opération, qui consiste à créer progressivement des transformations 3D complexes via JavaScript, où les choses auront un sens plus clair.

37
Jeff

Vous pouvez également appliquer plusieurs transformations en utilisant 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 utilisant Javascript.

20
richtelford

Vous pouvez appliquer plusieurs transformations comme celle-ci:

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

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 in-progress CSS Transforms Level 2 , mais ne trouve rien sur le support actuel du navigateur autre que chrome canary. J'espère qu'un jour je reviendrai et mettrai à jour le support du navigateur ici;)

Trouvez les informations dans cet article que vous voudrez peut-être vérifier concernant les solutions de contournement des navigateurs actuels.

2
schellmax

Transformer faire pivoter et traduire en CSS simple ligne: -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>

0
Vinkal

Commencez simplement par là que dans CSS, si vous répétez 2 valeurs ou plus, la dernière est toujours appliquée, sauf si vous utilisez la balise !important, tout en évitant d’utiliser !important autant que vous le pouvez. cas c'est le problème, donc la seconde transformation override la première 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, le code ci-dessous fonctionnera:

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

Si vous aimez jouer avec transform, lancez 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 >>

0
Alireza