Wie wirkt sich „translate3d' auf CSS „z-index' aus und wie kann ich die Stapelreihenfolge beibehalten?

Auswirkungen der 3D-Transformation auf den CSS-Z-Index

Beim Arbeiten mit überlappenden, absolut positionierten Elementen sind Z-Index-Eigenschaften für die Steuerung ihres Stapels von entscheidender Bedeutung Befehl. Bei Verwendung der Translate3d-WebKit-Transformation geht diese Kontrolle jedoch verloren.

Erklärung

Während einer Translate3D-Transformation werden Elemente in einem 3D-Raum verschoben. Durch Zuweisen eines Werts zum dritten Parameter (in diesem Fall -1px) wird das Element entlang der Z-Achse positioniert. Diese Erhöhung im 3D-Raum verändert jedoch auch die Art und Weise, wie Z-Index-Werte angewendet werden, was dazu führt, dass Elemente ihre festgelegte Stapelreihenfolge missachten.

Stapelreihenfolge beibehalten

Zur Beibehaltung Um die Stapelreihenfolge bei 3D-Transformationen festzulegen, verwenden Sie die CSS-Eigenschaft transform-style: flat; für das relevante Element.

Beispielimplementierung

Vor der Transformation
Webkit-Übergangswerte festlegen:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

Während der Transformation
Animieren Sie mit translator3d und achten Sie dabei auf den dritten Parameter ist so eingestellt, dass die Position des Elements entlang der Z-Achse abgeflacht wird:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, 0)' });

Nach der Transformation
Transformationsstil anwenden: flach; um die Stapelreihenfolge beizubehalten:

element.css({ 'transform-style': 'flat' });

Durch die Einbindung dieser Eigenschaft behalten die Elemente ihre Z-Index-Stapelung vor der Transformation bei, was eine korrekte Anzeige in einem mehrschichtigen Kontext ermöglicht.

Das obige ist der detaillierte Inhalt vonWie wirkt sich „translate3d' auf CSS „z-index' aus und wie kann ich die Stapelreihenfolge beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!