CSS 如何轉換 3D 反向兄弟元素堆疊順序？

如何使用CSS和3D變換實現兄弟元素堆疊順序反轉

理解這個問題，你的目標是確保子元素一致無論它們在DOM 樹中的位置如何，都會出現在其父級後面。雖然 z 索引似乎是一個合適的解決方案，但在這種情況下它通常被證明是無效的。

為了解決這一挑戰並實現所需的堆疊順序反轉，現代瀏覽器現在提供了一種利用變換3D 的強大技術 和CSS.

考慮以下CSS snippet:

.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);
}

在此範例中，為父元素分配了紅色背景和 100px x 100px 的尺寸。它相對定位並利用transform-style:preserve-3d屬性來創建3D堆疊上下文。

另一方面，子元素被賦予藍色背景和相同的尺寸。它絕對位於父級內部，頂部和左側有輕微的負偏移。至關重要的是，它被分配了一個transform：translateZ（-10px）屬性，該屬性將其在由父級的transform-style屬性創建的3D空間中沿z軸向後移動10px。

因此，儘管它當子元素在 DOM 樹中的位置時，由於其在 z 軸上的負平移，子元素實際上出現在其父元素後面。這種技術有效地顛倒了堆疊順序，確保子級始終位於父級後面。

以上是CSS 如何轉換 3D 反向兄弟元素堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！