2

在下面的场景中，我们看到两个 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 或正值，一切正常。

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

4

3 回答 3

1

我以前见过这个问题：

iOS 设备上的 CSS3 过渡问题

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

于 2011-07-19T19:18:44.237 回答
0

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

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

于 2012-08-18T17:38:37.023 回答
0

在父 DIV 上，更改 -webkit-transform-style: preserve-3d; 到-webkit-transform-style: flat; 这对我来说可以。

于 2015-10-22T15:22:17.083 回答