3D 変換は Z インデックスの積み重ね順序にどのような影響を与えますか?

3D 変換と Z インデックス: 謎を解く

CSS で Webkit 変換を使用する場合、特にtranslate3d を使用すると、 z-index の動作、スタック順序に影響を与える

あなたの場合、translate3d を使用して、2 つの重なり合う div を画面上でアニメーション化したり、画面上に戻したりしました。ただし、変換後、div は規定の Z インデックスの優先順位を失いました。

これは、Z 軸に 3D 変換 (つまり、translate3d の 3 番目のパラメーター) を適用すると、従来の 2D Z-インデックスが優先されるために発生します。メカニズムは適用されなくなりました。 3D レンダリング プレーンでは、階層は各要素の Z 値によって決定され、実質的に Z インデックスをオーバーライドします。

これを修正するには、2 つのオプションがあります:

1. フラット レンダリングに切り替える: 変換スタイル プロパティをフラットに設定すると、子の 2D レンダリングに戻すことができます。要素。これにより、ブラウザは Z インデックス値を再び優先するように強制されます。
2. 3D でのスタック順序の複製: 残念ながら、translate3d の 3 番目のパラメーターは 3D 空間でのスタック順序を複製しません。希望のスタック順序を達成するには、各要素の Z 値を手動で調整する必要があります。

追加コンテキスト:

WebKit バグ レポート (https を参照) ://bugs.webkit.org/show_bug.cgi?id=61824) 詳細については

ターゲット ブラウザ:

iPhone/iPad と Android ブラウザはどちらも Webkit 移行をサポートしているため、これらの環境では問題が解決されていることがわかります。

以上が3D 変換は Z インデックスの積み重ね順序にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。