Heim > Web-Frontend > CSS-Tutorial > Warum ist die Reihenfolge von „perspective()' in CSS-3D-Transformationen wichtig?

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

Susan Sarandon
Freigeben: 2024-11-21 10:53:12
Original
652 Leute haben es durchsucht

Why Does the Order of `perspective()` in CSS 3D Transforms Matter?

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage