無法訪問對象

Question

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

我使用zachstronaut的演示 （鏈接：http://www.zachstronaut.com/lab/galaxy-box/）的變型的3D立方體。它使用JavaScript，translate3d，scale3d等...

我試着在css文件中分配不同的z-index值，但沒有運氣。我可以訪問多維數據集外部的對象（可以使用懸停效果查看此對象），但不能訪問多維數據集內的對象。我有一種預感，那是因爲它沒有像pre3d.js那樣執行z-sort類型的函數。我想知道是否有人可以提供一些見解，我應該在哪裏尋找解決方案。

對象座標是隨機生成的，因此您可能必須刷新一次或兩次以獲取多維數據集內的一些對象。

謝謝！

編輯：

只有在Safari和Chrome瀏覽器開發測試

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的一種讓我們在這裏失敗了一點。歡迎來到流血的邊緣！