css - CSS3D 变换：失去元素交互性

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

让我知道这是否能解决您的问题