css - CSS3D 変換: 要素の対話性が失われる

Question

キーボード コントロールで回転できる 3D キューブを作成しています。ただし、回転後、各面の一部は対話性を失います (マウス イベントは含まれる要素に登録されません)。その問題の原因を知っている人はいますか？

説明が難しいので、テストサイトへのリンクを次に示します。

http://joe-morgan.net/projects/matrix3d/

もちろん、Safari と Chrome でのみ動作します。

ジョー・モーガン

Answer 1

ジョー、何が起こっているのかというと、まったく同じ Z 座標に 2 つの要素があるということです。つまり、その中の<li class="cube active">と の<section>面です。

ここでは、css の z インデックスではなく、css3 の変換された z 座標について話しています。

ブラウザーがまったく同じスペースを占有する 2 つのプレーンに遭遇すると、事態は混乱する可能性があります。

立方体面の hover イベントを li 要素で覆い隠したくないので、「アクティブな」クラスの CSS を変更する必要があります。main.js の 77 行目に、次のコードを設定します。

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

簡単な修正は、main.js で行うのと同じ matrix3d を格納する「action2」変数を作成することですが、z 座標で -1px に変換されます。css を設定すると vars.activeCube.css("-webkit-transform", action2);、すべてが期待どおりに機能するはずです。

これで問題が解決するかどうかお知らせください