Wie wirken sich 3D-Transformationen auf die Stapelreihenfolge des Z-Index aus?

3D-Transformationen und Z-Index: Das Geheimnis lüften

Bei der Verwendung von Webkit-Transformationen in CSS, insbesondere über Translate3D, können Inkonsistenzen in der entstehen Verhalten des Z-Index, das sich auf die Stapelreihenfolge der Elemente auswirkt.

In Ihrem Fall haben Sie translator3d verwendet, um Animieren Sie zwei überlappende Divs vom Bildschirm weg und wieder zurück. Nach der Transformation verloren die Divs jedoch ihre vorgeschriebene Z-Index-Priorität.

Dies liegt daran, dass beim Anwenden einer 3D-Transformation auf der Z-Achse (d. h. dem dritten Parameter von translator3d) der herkömmliche 2D-Z-Index verwendet wird Mechanismus gilt nicht mehr. In einer 3D-Rendering-Ebene wird die Hierarchie durch den Z-Wert jedes Elements bestimmt, der den Z-Index effektiv überschreibt.

Um dies zu beheben, haben Sie zwei Möglichkeiten:

1. Wechseln Sie zum flachen Rendering: Indem Sie die transform-style-Eigenschaft auf flach setzen, können Sie zum 2D-Rendering für die untergeordneten Elemente zurückkehren. Dadurch wird der Browser gezwungen, die Z-Index-Werte erneut zu priorisieren.
2. Stapelreihenfolge in 3D replizieren: Leider repliziert der dritte Parameter von Translate3d die Stapelreihenfolge in einem 3D-Raum nicht. Sie müssen den Z-Wert jedes Elements manuell anpassen, um die gewünschte Stapelreihenfolge zu erreichen.

Zusätzlicher Kontext:

Siehe WebKit-Fehlerbericht (https ://bugs.webkit.org/show_bug.cgi?id=61824) für weitere Informationen Erkenntnisse.

Zielbrowser:

Sowohl iPhone/iPad- als auch Android-Browser unterstützen Webkit-Übergänge, daher sollte das Problem in diesen Umgebungen behoben sein.

Das obige ist der detaillierte Inhalt vonWie wirken sich 3D-Transformationen auf die Stapelreihenfolge des Z-Index aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!