3D变换中子元素的定位不正确

Question

我目前有一个带图像的DIV和2个孩子，如下：

<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <img ... />
</div>

我将3D变换应用于 #main ，如下所示：

'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)';

这是我左/右的CSS：

#left, #right {width:50%;height:100%;position:absolute;z-index:999999;}
#right {right:0;}

向左或向右单击将导航到上一个/下一个图像。 我还在左/右容器上设置了一些淡入淡出事件。当旋转度为0时，它在所有浏览器中都能很好地工作。

但是，每当我应用rotateX或rotateY时，它在Opera和Chrome中都有一些奇怪的定位问题。

所有其他浏览器似乎都可以处理左/右div相对于3D变换的事件。但是在Opera和Chrome中，转换似乎与左/右div的mouseenter，mouseleave和click事件的触发相混淆。

为了使这更奇怪，它只会发生在其中一个子元素上。无论#main位于3D空间的哪一侧都存在问题。最接近观众的DIV仍然可以徘徊。

我还为每个DIV添加了边框和颜色，这不是一个实际的定位问题。两个DIV都完美呈现。

这是截图。白色边框应用于#main。 在#main里面你可以看到2个左/右DIV。有问题的（在太空中向后推）有一个白色渐变。我给每个人涂上了紫色边框。明亮的绿色前景工作完美。

任何建议都会很棒。适用于除Opera和Chrome之外的所有内容。 谢谢！

Answer 1

好的，所以最终想出来了，希望能帮助别人。

在3D空间中工作时，某些浏览器会正确地交叉/剪辑其他元素。 Safari是这些浏览器之一。在3D空间中旋转元素时，如上面的屏幕截图所示，实际的#main与背景元素相交。浏览器应该处理这个问题的正确方法是剪掉“进入”其背后元素的部分。但是，大多数浏览器不显示剪辑，而是显示转换后的元素（尽管它与另一个元素相交），如上面的屏幕截图所示。然而，Safari正确地处理了这个并且会剪切#main与背景相交的部分。

无论出于何种原因，Chrome和Opera在剪辑发生时仍会显示#main，但是任何绑定到已转换元素的事件都不会被触发，因为您将鼠标悬停在背景元素上，而不是已转换的元素

所有其他未剪辑转换元素的浏览器都会在这些转换后的元素上触发事件。

解决方案是调整变换元素的Z轴。