CSS で 3D 変換して兄弟要素の積み重ね順序を逆にするにはどうすればよいですか?

CSS と Transform 3D を使用して兄弟要素の重なり順の逆転を実現する方法

問題を理解して、子要素が一貫して配置されるようにすることを目指します。 DOM ツリー内の位置に関係なく、親の後ろに表示されます。 Z インデックスは適切なソリューションのように見えるかもしれませんが、そのようなシナリオでは効果がないことが判明することがよくあります。

この課題に対処し、望ましいスタック順序の逆転を達成するために、最新のブラウザーは現在、transform 3D を利用した強力な技術を提供しています。 および CSS.

以下の CSS を検討してください。スニペット:

.parent {
    background: red;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    position: relative;
}

.child {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translateZ(-10px);
}

この例では、親要素に赤色の背景と 100 ピクセル x 100 ピクセルのサイズが割り当てられます。これは相対的に配置され、transform-style:preserve-3d プロパティを利用して 3D スタッキング コンテキストを作成します。

一方、子要素には青色の背景と同じ寸法が与えられます。これは、上と左にわずかに負のオフセットを持って、絶対に親内に配置されます。重要なのは、transform:translateZ(-10px) プロパティが割り当てられていることです。これにより、親のtransform-styleプロパティによって作成された3D空間で、z軸に沿って10px後方にシフトされます。

その結果、 DOM ツリー内での位置を変更すると、子要素は Z 軸上で負の方向に移動するため、実質的に親の後ろに表示されます。この手法は、積み重ね順序を効果的に逆転させ、子が常に親の後ろに残るようにします。

以上がCSS で 3D 変換して兄弟要素の積み重ね順序を逆にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。