具有负 z 值的 CSS 3D 转换的 html 元素不会触发事件答案

【问题标题】：CSS 3D transformed html element with negative z-value doesn't fire events具有负 z 值的 CSS 3D 转换的 html 元素不会触发事件
【发布时间】：2011-07-19 17:09:22
【问题描述】：

在以下场景中，我们看到两个 div 在一个容器中应用了 CSS3 3D 转换。当它们被点击时，两者都应该触发一个事件。在这种情况下，会显示一个警报，指示单击了哪个 div。

<!DOCTYPE html>
<html>
<body>
  <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
    <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
    </div>
    <div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
    </div>
  </div>
</body>
</html>

现在的问题是，只有第二个 div 显示了所需的行为。点击第一个 div 不会产生如图所示的警报（在最新的 safari、chrome 和 safari iOS 上测试）。

只要我将负 z 值从 -100px 更改为 0px 或正值，一切正常。

这是浏览器的错误吗？有什么方法可以实现所需的行为？

【问题讨论】：

标签： events html css translate3d

【解决方案1】：

我以前见过这个问题：

CSS3 transition problem on iOS devices

Webkit Mobile 不喜欢负 z-index 值加上 3d 变换。 W3C 规定 z-index 必须是整数 http://www.w3.org/TR/CSS2/visuren.html#z-index，但在实践中——由于 Firefox 和现在的 Webkit 的遗留问题——最好坚持正数。

【讨论】：

我明白了。但在这种情况下，我们没有负 z-index 值（2D 空间）。对于 3d 坐标系中的元素，我们有负 z 轴值（例如 translate3d(0px, 0px, -100px)）。在我看来情况有所不同。

【解决方案2】：

为被裁剪对象的父元素添加一个正的 translateZ 以补偿子元素的负值。这会转换 body 元素 (z:0) 浏览器平面上方的项目，当 div 相对于浏览器 Z 平面变为负数时，它会停止单击和悬停事件。这似乎只发生在 Chrome 和 Safari（以及移动 Safari）中。

如果您将主体视为最后一个事件处理程序，我认为这不一定是一个错误。

【讨论】：

【解决方案3】：

在父 DIV 上，更改 -webkit-transform-style: preserve-3d;到 -webkit-transform-style: flat;它对我来说很好。

【讨论】：