Question

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

这是浏览器的错误吗？有没有办法达到预期的行为？

Answer 1

之前我见过这个问题：

CSS3 transition problem on iOS devices

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

Answer 2

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

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

Answer 3

在父DIV上，更改-webkit-transform-style：preserve-3d; to -webkit-transform-style：flat;它适用于我。

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

3 个答案: