访问 3d 立方体内部的对象时遇到问题
我的链接： 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 开发中测试
my link: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html
I have a 3d cube using a variation of zachstronaut's demo
(link: http://www.zachstronaut.com/lab/galaxy-box/ ). It uses javascript, translate3d, scale3d, etc...
I've tried assigning different z-index values in the css file, but with no luck. I can access the objects outside the cube(you can see this with the hover effect), but not the objects inside the cube. I have a hunch it is because it's not doing a z-sort type of function like pre3d.js. I was wondering if anyone could offer some insight into where I should look for a solution.
Object coordinates are generated randomly, so you may have to refresh once or twice to get some objects that are inside the cube.
Thanks!
EDIT:
Only tested in safari and chrome dev
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Webkit 会忽略任何已定义 translate3d 的 z 索引，这在逻辑上应该如此。 z-index 适用于 2D 世界，就像拿一堆纸并说“这个在上面”——你仍然有一个平坦的表面。不幸的是，如果您希望能够选择框中的“星星”之一，那么您就很不走运，因为您使用的是 HTML 节点。
执行此操作的正常方法是使用点击映射 - 基本上每个对象都会渲染两次。一次是正常的，一次是没有阴影的单色，等等。第二次渲染永远不会显示，只是用来告诉用户单击了什么。您可以获取他们单击的位置的颜色，并且该颜色映射到特定对象。如果您使用画布，您会这样做，只需更改第二次渲染的渲染顺序即可。
由于您使用的是 HTML 节点，因此您不能这样做。您有几个选项：
发布结果！ :)
Webkit ignores z-indexes on anything that has translate3d defined, as it logically should. z-index is meant for a 2D world, it's like taking a bunch of paper and saying "this one is on top" -- you still have a flat surface. Unfortunately, if you want to be able to select one of the "stars" inside of your box, you're all but out of luck since you're using HTML nodes.
The normal way of doing this is using a click-map -- basically every object gets rendered twice. Once normally and once in a single color with no shading, etc. The 2nd rendering is never shown and is simply used to tell what the user clicked on. You get the color where they clicked and that color maps to a specific object. If you were using canvas, you would do it that way and just change the rendering order on the 2nd render.
Since you're using HTML nodes, you can't do that. You have a couple of options:
Post the results! :)
首先，我很高兴您发现我的演示很有趣！
尝试在 3D CSS3 立方体内部的对象上执行悬停或捕获单击事件的运气不会很好，原因与在另一个 div 下的 div 上捕获悬停或单击事件的运气完全相同。 div... 在 HTML 中，所有 DOM 事件都会到达最顶部的 DOM 节点。如果一个 div 与另一个 div 重叠，则无法单击下面的那个 div。 3D 立方体内的所有内容都位于另一个 DOM 节点的“下方”。
事情变得更加复杂，因为您在 3D 空间中获取对象并要求用户使用 2D 输入设备（鼠标）在 2D 平面（浏览器窗口）上与它们进行交互。
您可以隐藏立方体的面，这样它们就不会阻止用户的单击。你可以像狼建议的那样做。
抱歉，我无法提供更多帮助... HTML 在这里有点让我们失望。欢迎来到最前沿！
First of all, I'm glad you found my demo interesting!
You're not going to have much luck trying to do a hover or capture a click event on objects inside of a 3D CSS3 cube for the exact same reason you wouldn't have much luck capturing a hover or click events on a div underneath another div... in HTML all the DOM events go to the top most DOM node. If one div overlaps another div, you can't click the one that is underneath. Everything inside the 3D cube is "underneath" another DOM node.
Things are further complicated because you're taking objects in 3D space and asking a user to interact with them on a 2D plane (the browser window) using a 2D input device (the mouse).
You could hide the faces of the cube so that they wouldn't block the user's clicks. You could do something like cwolves suggested.
Sorry I couldn't be more help... HTML kind of fails us a bit here. Welcome to the bleeding edge!