3D 變換如何影響 z-index 堆疊順序？

3D 變換與Z 索引：解開謎團

在CSS 中使用webkit 變換時，特別是透過translate3d，可能會出現不一致的情況z-index 的行為，影響元素的堆疊順序。

在你的在這種情況下，您使用 translate3d 將兩個重疊的 div 動畫化並返回到螢幕上。然而，變換後，div 失去了規定的 z-index 優先權。

發生這種情況是因為當您在 z 軸上應用 3D 變換（即，translate3d 的第三個參數）時，傳統的 2D z-index機制不再適用。在 3D 渲染平面中，層次結構由每個元素的 z 值決定，有效地覆蓋 z 索引。

要修正此問題，您有兩個選項：

1. 切換到平面渲染：將transform-style屬性設為平面，您可以將子元素恢復為2D渲染。這會迫使瀏覽器再次對 z-index 值進行優先排序。
2. 在 3D 中複製堆疊順序： 不幸的是，translate3d 的第三個參數不會複製 3D 空間中的堆疊順序。您需要手動調整每個元素的 z 值以實現所需的堆疊順序。

其他上下文：

請參閱 WebKit 錯誤報告 (https ://bugs.webkit.org/show_bug.cgi?id=61824）了解更多

目標瀏覽器：

iPhone/iPad 和Android 瀏覽器都支援webkit 轉換，因此您應該會看到問題在這些環境中解決。

以上是3D 變換如何影響 z-index 堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！