Wie wende ich mehrere CSS-Transformationen auf ein Element an?

Elemente mit mehreren CSS-Eigenschaften transformieren

CSS ermöglicht die Anwendung mehrerer Transformationen auf ein Element. Bei mehrfacher Verwendung der Transformationseigenschaft wird jedoch nur die letzte Anweisung wirksam. Um mehrere Transformationen anzuwenden, ist es notwendig, sie in einer einzigen Zeile zu kombinieren.

Beispiel:

Im folgenden CSS wird nur die Übersetzung auf das Element angewendet:

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

Um beide Transformationen anzuwenden, kombinieren Sie sie in einer Zeile:

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

Reihenfolge der Transformation

Mehrere Transformationen, die auf eine einzelne Zeile angewendet werden, werden von rechts nach links verarbeitet. Dies bedeutet, dass die Transformation ganz rechts zuerst angewendet wird.

Betrachten Sie die folgenden Beispiele:

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

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

Diese beiden Transformationen werden nicht das gleiche Ergebnis liefern, da andere Anwendungsreihenfolge.

Das obige ist der detaillierte Inhalt vonWie wende ich mehrere CSS-Transformationen auf ein Element an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!