CSS3D 变换：失去元素交互性答案

【问题标题】：CSS3D Transforms: Losing element interactivityCSS3D 变换：失去元素交互性
【发布时间】：2012-10-24 11:32:46
【问题描述】：

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

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

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

乔·摩根

【问题讨论】：

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

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

【讨论】：