Warum ist die Reihenfolge der „Perspektive' in CSS-3D-Transformationen wichtig?

CSS-3D-Transformationen mit Perspektive am Ende: Den Grund verstehen

CSS-3D-Transformationen ermöglichen komplizierte Animationen und perspektivische Effekte auf Webelemente. Es ergab sich jedoch eine merkwürdige Beobachtung, als die Eigenschaft „Perspektive“ am Ende der Transformationsliste platziert wurde.

Problem:

Im bereitgestellten Snippet haben zwei Boxen unterschiedliche Hover Verhaltensweisen. Die Eigenschaft „Perspektive“ wird am Ende der Transformationsliste für die erste Box platziert, während sie der Transformation für die zweite Box vorausgeht:

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

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

Dies führt zu unterschiedlichen visuellen Ergebnissen, obwohl beide Transformationen scheinbar identisch sind.

Antwort:

Der Schlüssel zum Verständnis dieses Verhaltens liegt in der Reihenfolge, in der die Transformationsmatrix berechnet wird. Gemäß der CSS-Transformationsspezifikation wird die Matrix wie folgt berechnet:

1. Beginnen Sie mit der Identitätsmatrix.
2. Übersetzen Sie anhand der berechneten X- und Y-Werte des Transformationsursprungs.
3. Multiplizieren Sie mit jeder Transformationsfunktion in der Transformationseigenschaft von links nach rechts.
4. Übersetzen Sie mit den negierten berechneten X- und Y-Werten von transform-origin.

Erklärung:

In Schritt 3 ist es entscheidend, die Transformationen von von links nach rechts anzuwenden. Dies bedeutet, dass, wenn die Perspektive am Ende der Liste platziert wird, die Übersetzung durchgeführt wird, bevor die Perspektive angewendet wird.

Infolgedessen erfolgt die Übersetzung ohne den Perspektiveffekt, weshalb die resultierende Bewegung scheint flach und ohne Tiefe zu sein.

Auswirkungen:

• Platzieren Sie die Perspektiveigenschaft immer am Anfang des Transformationsliste, um sicherzustellen, dass sie vor allen anderen Transformationen angewendet wird.
• Vermeiden Sie die Anwendung der Perspektiveneigenschaft innerhalb des Elements, das Sie transformieren möchten, da dies keine Auswirkungen hat.

Folgendes Wenn Sie diese Richtlinien befolgen, können Sie mit der richtigen Anwendung der Perspektiveigenschaft die gewünschten 3D-Transformationseffekte erzielen.

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