CSS3 Translate3d 鼠标事件问题

Question

所以，我得到了这段代码：jsfiddle.net/XNvzW

彩色块设置在 3d 场景中，其中彩色框有一点重叠，并具有以下 z 值：10、5、0、-5、-10（框右上角的数字） .当您将鼠标悬停在一个框上时，颜色会发生变化，并且您会看到一条消息：悬停在 #x.block 上。很简单。

现在，有时负 z 块起作用（并响应鼠标事件，无论是在 CSS 中使用 :hover 还是在 JS 中使用 $.mouseenter()），但有时它们不会，关于何时和为什么。 TranslateZ 属性的负值似乎存在某种问题，W3C 甚至在他们如何使用 Z 的示例中使用了负值。我发现的一个相关的 * question 似乎没有得到大量讨论或解决问题的答案。

想法？

我应该补充一点，这在 Internet Explorer 9.0 中似乎可以正常工作，但在基于 WebKit 的浏览器中却不行。

找到this bug filed in WebKit（但这不是我要做的）

Answer 1

为被裁剪对象的父级添加一个正 translateZ 以补偿负值：在这种情况下 -webkit-transform: translate3d(0px,0px,10px); 到父级 #stage div。这会转换 (z:0) 浏览器平面上方的项目，当 div 相对于浏览器 Z 平面（body 元素）变为负数时，它会停止单击和悬停事件。这似乎只发生在 Chrome 和 Safari（以及移动 Safari）中。如果您将主体视为最后一个事件处理程序，我认为这不一定是一个错误。

您可以看到这一点：在您的 jsfiddle 上，如果您只将 Z #stage 转换为 5px，您将看到 -5px div 现在可以工作，但 -10px div 仍然不能。