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

CSS-3D-Transformations-Macken: Perspektivische Reihenfolge

CSS-3D-Transformationen bieten robuste Optionen für die Bearbeitung von Elementen in drei Dimensionen. Es wurde jedoch eine besondere Eigenart beobachtet: Die Reihenfolge der perspective()-Funktion innerhalb der Transformationseigenschaft wirkt sich auf die resultierende Transformation aus.

Reihenfolge ist wichtig

Beachten Sie den folgenden Code Snippet:

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

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

Hier sollen sich die Elemente in den Bildschirm hinein und aus ihm heraus bewegen. Allerdings ist der Effekt nur für die erste Box sichtbar, während die zweite davon unberührt bleibt. Dieses seltsame Verhalten entsteht, weil die Reihenfolge der Funktion perspective() wichtig ist.

Transformationsberechnung

Gemäß der CSS-Spezifikation wird die Transformationsmatrix aus der Transformationseigenschaft berechnet in der folgenden Reihenfolge:

1. Anwenden der durch transform-origin angegebenen Übersetzung
2. Mit jeder Transformation multiplizieren Funktion, von links nach rechts
3. Umgekehrte Transformation, angegeben durch transform-origin

Das bedeutet, dass die Funktion perspective() zuerst (d. h. ganz links) angewendet werden muss, damit ihre Wirkung erzielt wird richtig betrachtet.

Perspektive innerhalb transformierter Elemente vermeiden

Außerdem Es ist wichtig, die Verwendung der perspektivischen Eigenschaft innerhalb der Elemente selbst zu vermeiden. Obwohl dies logisch erscheinen mag, ist es unnötig und kann zu unerwarteten Ergebnissen führen.

Stellen Sie daher immer sicher, dass die Funktion perspective() zuerst in der Transformationseigenschaft aufgeführt ist, um die gewünschten 3D-Transformationen zu erreichen.

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