Warum ist die Reihenfolge von „perspective()' in CSS „transform' für 3D-Transformationen wichtig?

CSS 3D-Transformationen: Perspektiveninteraktionen

Bei der Anwendung von 3D-Transformationen in CSS spielt die Reihenfolge der Ausführung eine entscheidende Rolle. Dies ist besonders relevant, wenn die Funktion perspective() verwendet wird.

Problembeschreibung

Ein Benutzer hat beobachtet, dass die Transformationseigenschaft unterschiedliche Auswirkungen hat, je nachdem, ob die Funktion perspective() Die Funktion wird am Anfang oder Ende des Eigenschaftswerts deklariert. Dieses Verhalten wurde sowohl in Chrome- als auch in Firefox-Browsern beobachtet.

Ursache

Gemäß den CSS-Spezifikationen wird die Transformationsmatrix durch Anwenden der Transformationsfunktionen von links berechnet nach rechts. Wenn die Funktion perspective() am Ende platziert wird, wird sie nach allen anderen Transformationen, wie z. B. Übersetzungen, angewendet. Dies führt dazu, dass die Übersetzung ohne Berücksichtigung der Perspektive durchgeführt wird.

Lösung

Um genaue 3D-Transformationen sicherzustellen, ist es unbedingt erforderlich, die Funktion perspective() anzugeben Beginn der Transformationseigenschaft Wert.

Beispiel:

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

In diesem Beispiel wird das erste Feld in den 3D-Raum mit angewendetem Perspektiveffekt übersetzt, das zweite Feld hingegen nicht Lassen Sie die Perspektive anwenden.

Zusätzlich Überlegungen:

• Es wird nicht empfohlen, die Eigenschaft „Perspektive“ innerhalb von Elementen zu verwenden, die einer Transformation unterzogen werden. Dies kann zu unerwarteten Ergebnissen führen.
• Die Reihenfolge der Transformationsfunktionen ist wichtig und kann das Ergebnis beeinflussen. Es ist wichtig, zu experimentieren und die Wirkung verschiedener Sequenzen zu erkunden.

Das obige ist der detaillierte Inhalt vonWarum ist die Reihenfolge von „perspective()' in CSS „transform' für 3D-Transformationen wichtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!