「translate3d」は CSS の「z-index」にどのような影響を与えますか?また、スタック順序を維持するにはどうすればよいですか?

3D 変換が CSS z-Index に与える影響

重複する絶対位置の要素を操作する場合、スタックを制御するために z-index プロパティが不可欠です注文。ただし、translate3d WebKit 変換を使用する場合、このコントロールは失われます。

説明

translate3d 変換中、要素は 3D 空間で移動します。 3 番目のパラメーター (この場合は -1px) に値を割り当てると、要素は Z 軸に沿って配置されます。ただし、3D 空間でのこの高度により、Z インデックス値の適用方法も変更され、要素が確立されたスタック順序を無視するようになります。

スタック順序の維持

保持するには3D 変換中のスタック順序には、CSS プロパティtransform-style: flat;を使用します。関連する要素について。

実装例

変換前
WebKit 遷移値の設定:

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

期間中変換
translate3d を使用してアニメーション化し、3 番目のパラメーターが Z 軸に沿った要素の位置を平坦化するように設定されていることを確認します。

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

変換後
適用変換スタイル: フラット;スタック順序を保持するには:

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

このプロパティを組み込むことで、要素は変換前の Z インデックスのスタックを維持し、マルチレイヤー コンテキスト内で正しく表示できるようになります。

以上が「translate3d」は CSS の「z-index」にどのような影響を与えますか?また、スタック順序を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。