2

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

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

我正在对#main应用 3D 变换，如下所示：

'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 中出现一些奇怪的定位问题。

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

更奇怪的是，它只会发生在其中一个子元素上。#main 的任何一侧在 3D 空间中放置得更远都会出现问题。离观察者最近的 DIV 仍然会很好地悬停。

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

这是一个屏幕截图。白色边框应用于#main。在#main 中，您可以看到 2 个左/右 DIV。有问题的（在太空中被推到更远的地方）有一个白色的渐变。我为每一个都应用了紫色边框。亮绿色的前景完美地工作。

在此处输入图像描述 任何建议都会很棒。适用于除 Opera 和 Chrome 之外的所有设备。谢谢！

4

1 回答 1

1

好的，所以终于想通了，希望能帮助其他人。

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

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

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

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

于 2013-05-01T19:43:56.423 回答