CSS3D變換：失去元素交互性

我正在創建一個可以通過鍵盤控件旋轉的3D立方體。但旋轉後，每個臉部的部分會失去交互性（鼠標事件不會在包含的元素上註冊）。任何人都知道什麼可能導致這個問題CSS3D變換：失去元素交互性

這很難解釋，所以這裏是一個測試網站的鏈接：

它只能在Safari和Chrome，當然。

喬·摩根

2011-09-29 Joe Morgan

您打賭。我嘗試更換元素，但似乎沒有幫助。這是小提琴：http://jsfiddle.net/3xe9d/1/ –

喬，發生了什麼事是，你有完全相同的z座標的兩個元素。即，<li class="cube active">和<section>面臨它。

在這裏，我們不是說css的z-index，而是css3的翻譯z座標。

當瀏覽器遇到兩架飛機佔據完全相同的確切空間時，事情可能會變得混亂。

既然你不想讓li元素遮住你的cube面板的懸停事件，你應該改變你的「活動」類CSS。在main.js的77行，你的代碼設置：

vars.activeCube.css("-webkit-transform", action);

速戰速決將創建一個「動作2」變量，你main.js做存儲將同一Matrix3D，但翻譯-1px在z座標中。用 vars.activeCube.css("-webkit-transform", action2);設置css，一切都應按預期工作。

讓我知道這是否解決了您的問題

2012-10-24 03:32:46

這很有趣 - 我幾乎忘記了這一點。果然，這是問題所在。感謝您的洞察！ –

回答