CSS3 Transformation Reihenfolge Angelegenheiten: am weitesten rechts zuerst

Question

Wenn wir CSS3 transform: operation1(...) operation2(...) verwenden, welche zuerst getan wird?

Die erste durchgeführte Operation scheint die auf der rechten Seite zu sein., d.h. hier operation2 wird vor operation1 durchgeführt. Nur um sicher zu sein, ist es wahr?

Hinweis: Ich habe an einigen Stellen eine Sache und ihr Gegenteil gelesen (Antworten, Artikel im Internet), also die Frage hier.

Answer 1

Ja, die erste Operation durchgeführt ist derjenige, der die meisten auf der rechten Seite., Das heißt hier operation2 vor operation1 erfolgt.

Hier ist die Dokumentation: http://www.w3.org/TR/css-transforms-1/, aber ich habe den Absatz darüber noch nicht gefunden.

---

Beispiel 1

Hier wird die Skalierung erste geschehen ist, und dann die Übersetzung von 100px vertikal (wenn Übersetzung zuerst fertig war, würde die Skalierung Übersetzung von 500px machen!)

#container { 
 
    \t position: absolute; 
 
    \t transform: translate(0,100px) scale(5); 
 
    \t transform-origin: 0 0; }

<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

Beispiel 2

Hier ist die Übersetzung erste und dann die Skalierung erfolgt (die Skalierung erfolgt nach macht, dass die Übersetzung wie ein 500px-Übersetzung aussieht!)

#container { 
 
    \t position: absolute; 
 
    \t transform: scale(5) translate(0,100px); 
 
    \t transform-origin: 0 0; }

<div id="container"><img src="https://i.stack.imgur.com/xb47Y.jpg"></img></div>

Answer 2

Es ist von Links bis Rechts

Von W3C Editors Draft

div { 
    height: 100px; width: 100px; 
    transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); 
} 

Dies bewegt das Element sowohl um 80 Pixel in der X und Y-Richtung-Transformation skaliert dann das Element um 150%, dreht sie dann 45 ° im Uhrzeigersinn um die Z-Achse. Beachten Sie, dass die Skalierung und Drehung um die Mitte des Elements erfolgt, da das Element den Standard-Transformationsursprung von 50% 50% hat.