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:
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!