CSS3D 变换 : Losing element interactivity

Question

我正在创建一个可以使用键盘控件旋转的 3D 立方体。但是在旋转之后，每张脸的部分失去了交互性(鼠标事件不会在包含的元素上注册)。任何人都知道可能导致该问题的原因是什么？

这很难解释，所以这里有一个测试站点的链接:

http://joe-morgan.net/projects/matrix3d/

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

乔摩根

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);一切都应该按预期工作。

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