google-chrome - chrome css-transform 问题：旋转元素前面的元素对样式和点击反应不佳

Question

我有一个旋转的绿色 div：

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

在它的前面有一个黑色的 div cursor:pointer（并且它也会在点击时发出警报）。

演示小提琴：http: //jsfiddle.net/antishok/QWNyT/8/

问题：在 chrome 中（但不是在 FF 中）沿黑色 div 移动鼠标光标时，有一个光标返回默认值的整个区域（并且不会触发单击事件）。没有后面的 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 );