在下面的场景中，我们看到两个 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 或正值，一切正常。
这是浏览器的错误吗？ 有什么方法可以实现所需的行为吗？
最佳答案
我以前见过这个问题:
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 的遗留问题——最好坚持使用正数。
关于events - 具有负 z 值的 CSS 3D 转换后的 html 元素不会触发事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6751137/