google-chrome - chrome css 转换问题 : element in front of rotated element doesn't respond well to styling & clicks

Question

我有一个绿色的 div，它的旋转方式是:

-webkit-transform:透视(600px)旋转Y(-45deg)

在它前面有一个带有cursor:pointer的黑色div(并且它还会在点击时发出警报)。

演示 fiddle :http://jsfiddle.net/antishok/QWNyT/8/

问题:在 chrome 中(但不是在 FF 中)，当沿着黑色 div 移动鼠标光标时，有一个整个区域光标会返回到默认值(并且单击事件不会发生) t 触发)。没有后面div的旋转，就不存在这个问题。

我可以做点什么吗？这是一个已知的错误吗？

谢谢。

Answer 1

如果您在 Safari 中查看，您会发现黑色 div 实际上穿过绿色 div，如下所示:

所以，从你的意图来看，Chrome 似乎得到了正确的点击区域，但 Firefox 和 Chrome 都渲染了错误。

您需要做的是将绿色 div 在 3d 空间中进一步推到后面，您可以通过...来实现这一点

-webkit-transform: translateZ( -200px ) perspective( 600px ) rotateY( -45deg );
-moz-transform: translateZ( -200px ) perspective( 600px ) rotateY( -45deg );