Wie wende ich mehrere CSS-Transformationen korrekt an?

Anwenden mehrerer CSS-Transformationen

CSS-Transformationen ermöglichen Entwicklern die Manipulation von Elementen auf verschiedene Arten, einschließlich Übersetzung, Drehung und Skalierung. Wenn jedoch mehrere Transformationen auf ein Element angewendet werden, wird normalerweise nur die letzte Transformation ausgeführt.

Problem:

Im folgenden Beispiel wird die Übersetzungstransformation nicht angewendet, weil die Rotationstransformation wird danach platziert:

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

Lösung:

Um mehrere anzuwenden Transformationen müssen sie in einer einzelnen Zeile platziert und durch Leerzeichen getrennt werden. Die Transformationen werden von rechts nach links angewendet:

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

Daher wird zuerst die Rotationstransformation angewendet, gefolgt von der Übersetzung.

Reihenfolge der Ausführung:

Beim Anwenden mehrerer Transformationen ist die Reihenfolge der Transformationen wichtig. Wenn Sie beispielsweise ein Element um 90 Grad drehen und es dann um 1,5 skalieren, führt dies nicht zum gleichen Ergebnis, als wenn Sie es zuerst skalieren und dann drehen.

Betrachten Sie die folgende Demonstration:

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

In In diesem Beispiel wird „.orderOne“ um 90 Grad gedreht und um 1,5 skaliert angezeigt, während „.orderTwo“ um 90 Grad gedreht und dann angezeigt wird um 1,5 skaliert. Dies zeigt, dass die Transformationsreihenfolge wichtig ist und bei der Anwendung mehrerer Transformationen sorgfältig berücksichtigt werden muss.

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