Wie wende ich mehrere Transformationen in CSS an?

Wie kann ich mit CSS mehrere anwenden transform?

Beispiel: Im Folgenden wird nur die Übersetzung angewendet, nicht die Drehung.

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

Sie müssen sie wie folgt in eine Zeile setzen:

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

Wenn Sie mehrere Transformationsanweisungen haben, wird nur die letzte angewendet. Es ist wie bei jeder anderen CSS-Regel.

Beachten Sie, dass mehrere einzeilige Transformationsanweisungen von rechts nach links angewendet werden .

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

führt nicht zum gleichen Ergebnis:

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

Ich füge diese Antwort nicht hinzu, weil sie wahrscheinlich hilfreich ist, sondern nur, weil sie wahr ist.

Sie können nicht nur die vorhandenen Antworten verwenden, um zu erklären, wie Sie mehr als eine Übersetzung erstellen, indem Sie sie verketten, sondern auch die 4x4-Matrix selbst erstellen

Ich habe das folgende Bild von einer zufälligen Seite aufgenommen, die ich beim Googeln gefunden habe und die Rotationsmatrizen zeigt:

Drehung um die x-Achse:
Drehung um die y-Achse:
Drehung um die z-Achse:

Ich konnte kein gutes Beispiel für eine Übersetzung finden. Wenn ich mich also richtig erinnere / verstehe, Übersetzung:

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

Weitere Informationen finden Sie im Wikipedia-Artikel zur Transformation sowie im Pragamatic CSS3-Tutorial, das dies recht gut erklärt. Eine andere Anleitung, die ich gefunden habe und die beliebige Rotationsmatrizen erklärt, sind Egon Raths Notizen zu Matrizen

Die Matrixmultiplikation funktioniert natürlich zwischen diesen 4x4-Matrizen. Um eine Rotation gefolgt von einer Übersetzung durchzuführen, erstellen Sie die entsprechende Rotationsmatrix und multiplizieren sie mit der Translationsmatrix.

Dies kann Ihnen ein bisschen mehr Freiheit geben, es genau richtig zu machen, und es wird auch so gut wie unmöglich sein, dass irgendjemand versteht, was es tut, einschließlich Sie in fünf Minuten.

Aber es funktioniert.

Bearbeiten: Ich habe gerade festgestellt, dass ich es versäumt habe, die wahrscheinlich wichtigste und praktischste Anwendung zu erwähnen, nämlich die schrittweise Erstellung komplexer 3D-Transformationen über JavaScript, bei denen die Dinge etwas sinnvoller werden.

Sie können auch mehrere Transformationen mit einer zusätzlichen Markup-Ebene anwenden, z.

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

Dies kann sehr nützlich sein, wenn Sie Elemente mit Transformationen mit Javascript animieren.

Sie können mehr als eine Transformation wie folgt anwenden:

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

Irgendwann in der Zukunft können wir es so schreiben:

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

Dies ist besonders nützlich, wenn Sie einzelne Klassen auf ein Element anwenden:

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

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

Diese Syntax ist in der aktuellen CSS Transforms Level 2-Spezifikation definiert , kann jedoch nichts über die aktuelle Browserunterstützung außer Chrome Canary finden. Hoffe eines Tages werde ich zurückkommen und die Browserunterstützung hier aktualisieren;)

In diesem Artikel finden Sie Informationen, die Sie möglicherweise zu Problemumgehungen für aktuelle Browser lesen möchten.

Beginnen Sie einfach von dort aus, dass in CSS , wenn Sie 2 oder mehr Werte wiederholen, immer der letzte angewendet wird, es sei denn, Sie verwenden ein !importantTag. Vermeiden !importantSie jedoch gleichzeitig, so viel wie möglich zu verwenden. In Ihrem Fall ist dies das Problem, also der zweite Transformation überschreibt in diesem Fall die erste ...

Wie können Sie also tun, was Sie wollen? ...

Keine Sorge , die Transformation akzeptiert mehrere Werte gleichzeitig ... Der folgende Code funktioniert also:

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

Wenn Sie mit Transformation herumspielen möchten , führen Sie den folgenden Iframe von MDN aus :

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

Weitere Informationen finden Sie unter dem folgenden Link:

<< CSS-Transformation >>

Transformieren Drehen und Übersetzen in einzeiligem CSS: -Wie?

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>