Comment appliquer plusieurs transforme en CSS?

À l'aide de CSS, comment puis-je appliquer plus d'une transform?

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

li:nth-child(2) {
    transform: rotate(15deg);
    transform: translate(-20px,0px);        
}
InformationsquelleAutor Ben | 2012-05-26
  1. 821

    Vous devez les mettre sur une ligne comme ceci:

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

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

    Garder à l'esprit plusieurs de transformer une ligne directives sont appliquée à partir de la droite vers la gauche.

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

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

    sera pas produisent le même résultat:

    CSS:

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

    HTML:

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

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

    • J'ai essayé de les séparer par un "," comme c'est fait avec de multiples ombres, mais cela ne fonctionne pas. Je vous remercie.
    • est-il possible de demander une traduction avant les autres...comme l'inclinaison avant de tourner. Comme pour moi, peu importe ce que je fais, l'élément est tourné en premier et ensuite asymétrique qui se traduit par quelque chose qui n'est pas ce que je veux.
    • Fonctionne très bien pour moi. jsbin.com/AmejOcA/2
    • donc noway pour les diviser en plusieurs lignes
    • transformer:translate(100px,100px) tourner(45deg) traduire(100px,100px) tourner(45deg); équivaut à transformer:translate(200px,200px) tourner(90deg) ,le dernier, ajouter
    • Vous devrez peut-être inclure un préfixe pour le transformer pour fonctionner dans tous les navigateurs. Merci de voir ce post pour plus d'informations
    • Ceux-ci sont pas de l'égalité. codepen.io/anon/pen/Qzabyx
    • Gardez à l'esprit de plusieurs de transformer une ligne des directives exécuté de la gauche vers la droite - ce: transform: scale(1,1.5) rotate(90deg); et : transform: rotate(90deg) scale(1,1.5); sera pas produisent le même résultat: jsfiddle.net/852hzq9w
    • Vous signifie de droite à gauche, correct? Pour transform: scale(1,1.5) rotate(90deg);, la rotation arriverait-il avant de l'échelle.

    InformationsquelleAutor lukad
  2. 40

    Je suis en ajoutant cette réponse n'est pas parce qu'il est susceptible d'être utile, mais juste parce que c'est vrai.

    En plus de l'utilisation de l'existant réponses expliquant comment faire plus d'une traduction en utilisant une chaîne, vous pouvez également construire la matrice de 4x4 vous-même

    J'ai attrapé l'image suivante de certains site au hasard j'ai trouvé tout googler qui montre matrices de rotation:

    Rotation autour de l'axe x: Comment appliquer plusieurs transforme en CSS?

    La Rotation autour de l'axe y: Comment appliquer plusieurs transforme en CSS?

    La Rotation autour de l'axe z: Comment appliquer plusieurs transforme en CSS?

    Je ne pouvais pas trouver un bon exemple de la traduction, donc en supposant que je me souviens que/comprendre ce droit, traduction:

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

    Voir plus à la Article de wikipédia sur la transformation ainsi que le Pragamatic CSS3 tutoriel qui explique plutôt bien. Un autre guide que j'ai trouvé qui explique arbitraire de rotation des matrices est Egon de Rath notes sur les matrices

    De multiplication de matrice travaille entre ces matrices 4x4 bien sûr, afin d'effectuer une rotation suivie d'une translation, vous effectuez la matrice de rotation et de le multiplier par la traduction de la matrice.

    Cela peut vous donner un peu plus de 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, vous savez, il fonctionne.

    Edit: je viens de réaliser que j'ai manqué de mentionner probablement les plus importantes et l'utilisation pratique de ce qui est à incrémentielle de créer des transformations 3D via JavaScript, où les choses se font un peu plus de sens.

    • Le "site au hasard" à mines.edu est malheureusement maintenant un lien mort.
    • Comme c'est le 9elements lien 🙁
    • merci pour ce que, je'llsee si je peux venir avec quelques liens plus tard aujourd'hui.
    • Ok, apparemment "plus tard aujourd'hui" pour moi signifie "six mois plus tard", mais au moins le 9elements lien est fixe (quelqu'un d'autre fixe au hasard des sites en lien avec la Wayback, et j'ai suivi leur exemple.)
    • J'ai aussi fait ceci pour vous aider à les comprendre.
    • ce vraiment cela ne rentre pas dans cette rubrique
    • ouais vous avez en grande partie raison. Le principal DONC répondre à la partie est que vous pouvez le faire, le reste est juste là pour être utile.
    • Cela peut être important pour ceux qui cherchent à animer des transformations via @keyframes. Chromium71 ne semble pas être en mesure de gérer l'animation (plutôt que de la transition) de multiples transformations, mais sans doute pourrait animer une simple transformation de la matrice.

    InformationsquelleAutor Jeff
  3. 23

    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 transforme à l'aide de Javascript.

    • Votre oublier les transform-style: preserve-3d
    • Il n'est pas essentiel pour imbriquée transformations 2d - dépend du résultat souhaité. Transform-origin sera très probablement venir dans maniable.
    InformationsquelleAutor richtelford
  4. 19

    Vous pouvez appliquer plus d'une transformation comme ceci:

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

    Un certain temps dans l'avenir, on peut l'écrire comme ceci:

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

    Cela va devenir particulièrement utile lors de l'application d'un cours particulier sur un élément:

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

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

    Cette syntaxe est définie dans l'en-cours CSS Transforme spécification de Niveau 2, mais ne peut pas trouver quelque chose sur l'actualité de prise en charge du navigateur, puis d'autres chrome canary. Espère qu'un jour je reviendrai et mise à jour prise en charge du navigateur ici 😉

    Trouvé l'info dans cet article qui vous voudrez peut-être consulter concernant les solutions de contournement pour les navigateurs actuels.

    InformationsquelleAutor schellmax
  6. 1

    Tout simplement à partir de là que dans CSS, si vous répétez les 2 valeurs ou plus, toujours dernier est appliqué, à moins d'utiliser !important tag, mais en même temps, éviter d'utiliser !important autant que vous le pouvez, de sorte que, dans votre cas, c'est le problème, donc, la deuxième transformer remplacer le premier dans ce cas...

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

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

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

    Si vous aimez jouer avec les transformer exécuter l'iframe de MDN ci-dessous:

    HTML:

    <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'info:

    << CSS transform >>

    InformationsquelleAutor Alireza
  7. 0

    Transformer Rotation et translation dans une seule ligne de css:-Comment?

    CSS:

    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:

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

    InformationsquelleAutor Vinkal
  8. -1

    Un moyen simple d'appliquer de multiples transformer, c'est ce

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

    Mais aussi n'oubliez pas que vous devez ajouter un préfixe pour le faire fonctionner dans tous les navigateurs comme certains browers comme safari, c'est à dire pas en charge les transformer propriété sans préfixe.

    li:nth-of-type(2){
    transform : translate(-20px, 0px) rotate(15deg);
    -webkit-transform : translate(-20px, 0px) rotate(15deg);
}
    InformationsquelleAutor Gaurav Aggarwal
  9. -3

    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;

    Je suis en utilisant enjoycss outil

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

    il génère le code css pour les paramètres de transformation en utilisant l'interface graphique pour générer le transformer le code 😉

    Comment appliquer plusieurs transforme en CSS?

    InformationsquelleAutor Nedudi