Question

我正在创建一个可以使用键盘控件旋转的3D立方体。但是在旋转之后，每个面部分都失去了交互性（鼠标事件不会在所包含的元素上注册）。有人知道可能导致这个问题的原因吗？

这很难解释，所以这里是一个测试网站的链接：

当然，它仅适用于Safari和Chrome。

Joe Morgan

Answer 1

乔，发生的事情是，在完全相同的z坐标上有两个元素。即，<li class="cube active">和<section>面临其中。

在这里，我们不是在讨论css的z-index，而是css3的z-坐标。

当浏览器遇到两个占据完全相同空间的平面时，事情会变得混乱。

由于您不希望li元素影响您的立方体面的悬停事件，您应该更改“活动”类CSS。在main.js的第77行，你用代码设置它：

vars.activeCube.css("-webkit-transform", action);

快速解决方法是创建一个“action2”变量，它存储与main.js中相同的matrix3d，但在z坐标中转换为-1px。设置css vars.activeCube.css("-webkit-transform", action2);，一切都应该按预期工作。

如果这可以解决您的问题，请告诉我