2

現在、次のように、画像と 2 つの子を持つ DIV があります。

<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <img ... />
</div>

次のように#mainに 3D 変換を適用しています。

'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)';

左/右用のCSSは次のとおりです。

#left, #right {width:50%;height:100%;position:absolute;z-index:999999;}
#right {right:0;}

左または右のいずれかをクリックすると、前/次の画像に移動します。また、左右のコンテナにいくつかのフェード ホバー イベントを設定しています。回転度が 0 の場合、すべてのブラウザでうまく機能します。

ただし、rotateXまたはrotateYを適用すると、OperaとChromeのみで奇妙な位置の問題が発生します。

他のすべてのブラウザーは、3D 変換に関連する左右の div のイベントをうまく処理しているようです。ただし、Opera と Chrome では、トランスフォームが左右の div の mouseenter、mouseleave、click イベントのトリガーを混乱させているようです。

これをさらに奇妙にするために、子要素の 1 つでのみ発生します。3D 空間で #main のいずれかの側が遠くに配置されていると、問題が発生します。ビューアに最も近い DIV は、問題なくホバリングします。

また、各 DIV に境界線と色を追加しましたが、実際の配置の問題ではありません。両方の DIV が完全に表示されます。

これがスクリーンショットです。#main に白枠をつけています。#main の中には、左右の 2 つの DIV があります。問題のあるもの (スペースの奥に押し込まれたもの) には、白いグラデーションがあります。それぞれに紫色の枠線を適用しました。明るい緑色の前景は完璧に機能します。

ここに画像の説明を入力 どんな提案も素晴らしいでしょう。Opera と Chrome 以外のすべてで動作します。ありがとう！

4

1 に答える 1

1

わかりましたので、最終的にこれを理解し、他の人を助けることを願っています.

3D 空間で作業する場合、特定のブラウザーは他の要素を正しく交差/クリップします。Safari は、これらのブラウザーの 1 つです。上のスクリーンショットのように 3D 空間で要素を回転させると、実際の #main が背景要素と交差します。ブラウザーがこれを処理する正しい方法は、その背後にある要素に「入る」部分を切り取ることです。ただし、ほとんどのブラウザーはクリッピングを表示せず、代わりに、上のスクリーンショットのように (別の要素と交差していますが) 変換された要素を表示します。ただし、Safari はこれを正しく処理し、背景と交差する #main の部分を切り取ります。

なんらかの理由で、Chrome と Opera はクリッピングが発生したときにまだ #main を表示しますが、変換された要素ではなく背景要素にカーソルを合わせているため、変換された要素にバインドされているイベントは発生しません。

変換された要素をクリップしない他のすべてのブラウザーは、それらの変換された要素でイベントを発生させます。

解決策は、変換された要素の Z 軸を調整することです。

于 2013-05-01T19:43:56.423 に答える