3D cssキューブの面内の要素は選択できません。 Strange

Question

私は3D cssキューブメニューを構築しています。コードhere。

<button id="btn">flip button</button>  
<div class="signup-viewport"> 
    <div id="cube" class="cube animation"> 
     <div class="front">front <a href="">front link</a></div> 
     <div class="back">Back</div> 
     <div class="left">Left</div> 
     <div class="right">Right <a href="">right link</a></div> 
     <div class="bottom">Bottom</div> 
     <div class="top">Top</div> 
    </div> 
</div> 

「反転ボタン」ボタンで顔を反転すると、キューブの右側からのリンクをクリックできません。

なぜでしょうか？ Firefoxではリンクは機能しますが、クロムとクロムでは機能しません。

Answer 1

非常に苦労したあと、私は最終的にはクリックできない選択可能な問題を回避することができました。

キューブの側面を選択可能にするには、 'perspective'プロパティが必要です（@Cedric Reichenbachが納得したように）。遠近法レンダリングのために副作用としてピクチャレーションが発生します。私は大きい視点番号（10000px）を使ってピクセレーションを取り除こうとしましたが、ピクセレーションはまだそこにありました。したがって、視点番号を増やすことによって、レンダリングのz平面がより遠くに出て、視点が少なくなります。

すべての種類のものを実験した後、私が「騙された」方法は、非常に大きな数字を使用して視覚化しました。 （perspective: 10000000px;）画像効果がなくなり、キューブの側面がクリック可能で選択可能になりました。

Hereは、溶液の実証である。

Answer 2

サーフェスに0のheightがあり、テキストがパディングエリアにレンダリングされたためです。 FirefoxとChromeは、マウスのイベントに関してこのような要素を別々に扱っているようです。

height: autoを使用すると、期待どおりに機能しますが、変化するコンテンツとの高さが一致するように注意してください。

ここにあなたの変更したJSFiddleを示します。

更新：

どうやら、クロムは、異なるOS」（またはバージョン）上で動作が異なります。

しかし、この問題は、変換の3D特性（transform-style: preserve-3D）に関連しているようです。明示的なパースペクティブを設定すると、それは私のマシン上で動作しますが、まだまだ不安定です。

Updated JSFiddle

また、3Dは、事実上、視聴者に近い面を持ち上げることにより、ピクセルグリッドから「デタッチ」コンテンツを変換するので、すべてが、今少しぼやけて見えることがあります。