无法访问3d立方体内的对象

Question

我的链接：http://dl.dropbox.com/u/7727742/playlistsite6/index5.html

我有一个使用zachstronaut演示变体的3d立方体 （链接：http://www.zachstronaut.com/lab/galaxy-box/）。它使用javascript，translate3d，scale3d等...

我尝试在css文件中分配不同的z-index值，但没有运气。我可以访问多维数据集外部的对象（您可以使用悬停效果查看此对象），但不能访问多维数据集内的对象。我有预感，因为它没有像pre3d.js那样执行z-sort类型的函数。我想知道是否有人可以提供一些有关我应该寻找解决方案的见解。

对象坐标是随机生成的，因此您可能需要刷新一次或两次以获取多维数据集内的某些对象。

谢谢！

编辑：

仅在safari和chrome dev中测试

Answer 1

Webkit忽略了已定义translate3d的任何内容的z索引，因为它在逻辑上应该如此。 z-index适用于2D世界，就像拿一堆纸说“这一个在上面” - 你仍然有一个平坦的表面。不幸的是，如果你想能够在你的盒子里面选择一个“星星”，那么你就好了，因为你使用的是HTML节点。

执行此操作的常规方法是使用单击映射 - 基本上每个对象都会呈现两次。一次正常，一次只有一种颜色，没有阴影等。第二次渲染从未显示，只是用于说明用户点击了什么。您可以获得他们单击的颜色，并将颜色映射到特定对象。如果您使用的是画布，则可以这样做，只需在第二次渲染时更改渲染顺序。

由于您使用的是HTML节点，因此无法执行此操作。你有几个选择：

• 您可以根据视口旋转和星形的x / y / z位置计算鼠标移动时鼠标下方的星号
• 您可以通过在没有立方体的情况下覆盖相同的渲染并且星星具有0％不透明度来尝试上述方法。新渲染中的每个星形都会映射到现有星形中的星形，并且您可以轻松检测鼠标。

发布结果！ ：）

Answer 2

首先，我很高兴您发现我的演示很有趣！

尝试在3D CSS3多维数据集内的对象上进行悬停或捕获点击事件时，您将不会有太多运气，原因完全相同的原因是您没有太多运气捕获悬停或点击事件在另一个div下面的div ...在HTML中，所有DOM事件都转到最顶层的DOM节点。如果一个div与另一个div重叠，则无法单击下面的div。 3D立方体内的所有内容都在“另一个DOM节点”下面。

事情变得更加复杂，因为您在3D空间中拍摄物体并要求用户使用2D输入设备（鼠标）在2D平面（浏览器窗口）上与它们进行交互。

您可以隐藏多维数据集的面，以便它们不会阻止用户的点击。你可以做一些像cwolves建议的那样。

抱歉，我无法提供更多帮助...... HTML在这里有点让我们失望。欢迎来到最前沿！