Wie wende ich mehrere CSS-Transformationen in einer Zeile an und wie ist die Reihenfolge der Anwendung?

Anwenden mehrerer CSS-Transformationen in einer Zeile

In CSS können Sie mehrere Transformationen gleichzeitig auf ein Element anwenden. Wenn Sie jedoch mehrere Transformationsanweisungen angeben, wird nur die letzte angewendet.

Um mehrere Transformationen in einer Zeile anzuwenden, verketten Sie sie mit Leerzeichen:

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

Reihenfolge von Anwendung

Es ist wichtig zu beachten, dass mehrere Transformationen von rechts nach links angewendet werden. Dies bedeutet, dass die Reihenfolge der Transformationen von Bedeutung ist, da:

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

sich unterscheidet von:

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

Beispiel

Betrachten Sie das folgende Beispiel:

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

Sie können den Unterschied beobachten, indem Sie die Transformationen in unterschiedlicher Reihenfolge anwenden.

Das obige ist der detaillierte Inhalt vonWie wende ich mehrere CSS-Transformationen in einer Zeile an und wie ist die Reihenfolge der Anwendung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!