使用transform：旋转时Z-index断开

Question

我正在使用parallax.js进行项目。我为鼠标驱动的动作添加了一些图层。 现在，在特定的图层上，我正在尝试制作一些rotationY和X.

从我设置旋转的那一刻起，绝对元素的堆叠顺序就会中断（如图所示）。

谷歌搜索了几个小时后，在搜索后，我看到许多用户建议将transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden;放在父母或每个元素上并通过实验。我错过了什么吗？

我知道preserve-3d做的工作（尊重z顺序）但在我的情况下没有。我在that codepen中重现了这个问题。 （将鼠标移动到那里）正如您所看到的那样，元素在图像中呈现不良并且彼此重叠。如何强制浏览器遵守Z顺序？

如果我设置#scene transform-style: flat，它会有效，但它会混淆3d感。

此外，parallax.js会自动插入内联样式，以便在源（第二张图像）上看到每个元素上保留3d和背面可见性