Javascript 三维变换中子元素的位置不正确

我目前有一个DIV，有一个图像和两个孩子，如下所示：

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

以下是我对左/右的CSS：

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

然而，每当我应用rotateX或rotateY时，它仅在Opera和Chrome中存在一些奇怪的定位问题。

所有其他浏览器似乎都能很好地处理与3D变换相关的左/右div事件。然而，在Opera和Chrome中，这些变换似乎干扰了左/右div的mouseenter、mouseleave和click事件的触发

更奇怪的是，它只会发生在一个子元素上。无论#main的哪一侧在3D空间中放置得更远，都会出现问题。最靠近查看器的DIV仍然可以正常悬停

我还为每个DIV添加了边框和颜色，这不是实际的定位问题。两个女主角都表现得很完美

这是一个截图。白色边框应用于#main。 在#main内，您可以看到2个左/右div。有问题的一个（在空间中推得更远）有白色渐变。我给每一个应用了紫色边框。前景的那件亮绿色的很好用

任何建议都会很棒。除Opera和Chrome外，所有产品均可使用。

---

谢谢

好的，所以我终于明白了这一点，希望能帮助其他人

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

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

所有其他不剪辑转换元素的浏览器将在这些转换元素上触发事件

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

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

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