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

Question

我有一个旋转的绿色 div:

-webkit-transform: perspective( 600px ) rotateY( -45deg )

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

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

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

我能做点什么吗？这是已知错误吗？

谢谢。

Answer 1

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

因此，从您的意图来看，Chrome 似乎正确地获得了命中区域，但 Firefox 和 Chrome 都呈现错误。

您需要做的是在 3d 空间中将绿色 div 推得更靠后，您可以通过...实现此目的

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