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

Question

我目前有一个包含图像和 2 个 child 的 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 之外的所有内容。 谢谢!

Answer 1

好的，所以终于弄明白了，希望能帮助其他人。

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

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

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

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