Wie wendet man mehrere Transformationen in CSS an?

Question

Mit CSS, wie kann ich mehr als eine transform anwenden?

Beispiel: Im folgenden wird nur die Übersetzung angewendet, nicht die Rotation.

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

Answer 1

Sie müssen sie wie folgt in einer Zeile platzieren:

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

Wenn Sie mehrere Transformationsanweisungen haben, wird nur die letzte angewendet. Es funktioniert wie jede andere CSS-Regel.

---

Beachten Sie, dass mehrere Transformationsanweisungen in einer Zeile von rechts nach links angewendet werden.

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

werden nicht dasselbe Ergebnis produzieren:

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

  A

  A

Answer 2

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

Neben der Verwendung der vorhandenen Antworten, die erklären, wie man mehr als eine Übersetzung durch Verkettung erstellt, können Sie auch die 4x4-Matrix selbst konstruieren.

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

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

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

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

Sehen Sie mehr auf der Wikipedia-Artikel zu Transformation sowie das Pragamatic CSS3-Tutorial, das es recht gut erklärt. Ein weiterer Leitfaden, den ich gefunden habe, der beliebige Rotationsmatrizen erklärt, ist Egon Raths Notizen zu Matrizen

Die Matrixmultiplikation funktioniert natürlich zwischen diesen 4x4-Matrizen, daher um eine Drehung gefolgt von einer Übersetzung durchzuführen, erstellen Sie die entsprechende Drehungsmatrix und multiplizieren sie mit der Übersetzungsmatrix.

Dies kann Ihnen ein wenig mehr Freiheit geben, um es genau richtig zu machen, und wird es auch so gut wie vollständig unmöglich machen, dass jemand versteht, was es tut, einschließlich Ihnen in fünf Minuten.

Aber, wissen Sie, es funktioniert.

Bearbeitung: Mir ist gerade aufgefallen, dass ich wahrscheinlich den wichtigsten und praktischsten Einsatz davon verpasst habe, nämlich die schrittweise Erstellung komplexer 3D-Transformationen über JavaScript, wo die Dinge etwas sinnvoller werden.

Answer 3

Sie können auch mehrere Transformationsvorgänge anwenden, indem Sie eine zusätzliche Ebene von Markup verwenden, z. B .:

    Hey!

.rotated-heading
{
    transform: rotate(10deg);
}

.scaled-up
{
    transform: scale(1.5);
}

Dies kann sehr nützlich sein, wenn Elemente mit Transformationen mit Javascript animiert werden.

Answer 4

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

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

Answer 5

Zu einem späteren Zeitpunkt, (jetzt verfügbar, siehe Updates unten) können wir es so schreiben:

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

Dies wird besonders nützlich, wenn individuelle Klassen auf ein Element angewendet werden:

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

Diese Syntax ist in der laufenden CSS Transforms Level 2-Spezifikation definiert, aber ich finde nichts über die aktuelle Browserunterstützung außerhalb von Chrome Canary. Hoffe, ich komme eines Tages zurück und aktualisiere die Browserunterstützung hier ;)

Habe die Informationen in diesem Artikel gefunden, den du vielleicht bezüglich Workarounds für aktuelle Browser überprüfen möchtest.

UPDATE: Funktion ist in Firefox 72 gelandet

UPDATE: jetzt verfügbar in Chrome 104, Edge 104, Safari 14.1, siehe https://web.dev/css-individual-transform-properties/#:~:text=support%20these%20properties.-,Browser%20support,-%3A