我的链接: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排序函数。我想知道是否有人能给我一些建议，告诉我应该在哪里寻找解决方案。
对象坐标是随机生成的，因此您可能需要刷新一次或两次才能获得立方体内的一些对象。
谢谢!
编辑:仅在safari和chrome dev中测试
Webkit忽略任何定义了translate3d的z索引，这在逻辑上是应该的。z-index适用于2D世界，就像拿起一叠纸，说"这张在上面"——你仍然有一个平坦的表面。不幸的是，如果你想在你的盒子里选择一个"星星"，你就太不走运了，因为你使用的是HTML节点。
通常的方法是使用click-map——基本上每个对象都会被渲染两次。一次是正常的，一次是单色的，没有阴影。第二次渲染从来不显示，只是用来告诉用户点击了什么。你得到他们点击的地方的颜色那个颜色映射到一个特定的对象。如果你使用画布，你会这样做，只是在第二次渲染时改变渲染顺序。
由于使用的是HTML节点，所以不能这样做。您有两个选项:
- 你可以在鼠标移动时根据视口旋转和星星的x/y/z位置计算哪个星星在鼠标下面
- 你可以尝试上面的方法，在没有立方体的情况下叠加一个相同的渲染，其中星星的透明度为0%。在你的新渲染中的每一颗星星将映射到你现有的一颗星星，你有很容易的鼠标悬停检测。
发布结果!:)
首先，我很高兴你觉得我的演示很有趣!
你不会有太多的运气去尝试在一个3D CSS3立方体内的对象上做一个悬停或捕获一个点击事件，因为完全相同的原因，你不会有太多的运气去捕获一个悬停或点击事件在另一个div下面的div…在HTML中，所有的DOM事件都放在最上面的DOM节点上。如果一个div与另一个div重叠，则不能单击位于下面的div。3D立方体内的所有内容都在另一个DOM节点的"下面"。
事情变得更加复杂，因为你在3D空间中获取对象，并要求用户在2D平面(浏览器窗口)上使用2D输入设备(鼠标)与它们进行交互。
你可以隐藏立方体的面，这样它们就不会阻碍用户的点击。你可以按照cwolves的建议去做。
对不起，我不能帮你更多的忙了。HTML在这里有点让我们失望。欢迎来到流血的边缘!