Elemente innerhalb einer Fläche eines 3D-Css-Würfels können nicht ausgewählt werden. Seltsame

Question

Ich baue ein 3D Css Cube-Menü. Code 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> 

Wenn das Gesicht durch die ‚Flip-Taste‘ -Taste, die Verbindung von der rechten Seite des Würfels angeklickt werden kann, nicht umgedreht wird.

Irgendwelche Ideen, warum? In Firefox funktioniert die Verbindung, aber auf Chrom und Chrom nicht.

Answer 1

Nach sehr sehr viel Mühe habe ich es schließlich geschafft, das nicht anklickbare und nicht auswählbare Problem zu umgehen.

Um die Seiten des Würfels auswählbar zu machen, wird die Eigenschaft 'Perspektive' benötigt (wie @Cedric Reichenbach verdichtet); aber als Nebeneffekt kommt es aufgrund des perspektivischen Renderings zu einer Verpixelung. Ich versuchte, die Pixelierung mit einer großen Perspektivennummer (10000px) loszuwerden, aber die Verpixelung war immer noch da. Wenn man also die Anzahl der Perspektiven erhöht, geht die Rendering-Z-Ebene "weiter weg", was den Anschein von weniger Perspektive erweckt.

Nach zwei Tagen des Experimentierens aller Arten von Sachen, wie ich "Perspektive" austrickst, wurde eine extrem große Zahl für die Perspektive verwendet. (perspective: 10000000px;) Jetzt ist der Verpixelungseffekt weg und die Seiten des Würfels sind anklickbar und auswählbar.

Here ist eine Demonstration der Lösung.

Answer 2

Es ist, weil Ihre Oberflächen eine height von hatten, wodurch der Text in Padding-Bereich gerendert wird. Firefox und Chrome scheinen solche Elemente in Bezug auf Mausereignisse unterschiedlich zu behandeln.

Wenn Sie height: auto verwenden, funktioniert es wie erwartet, aber Sie sollten darauf achten, dass die Höhe konsistent mit sich ändernden Inhalten bleibt.

Hier ist Ihre modifizierte JSFiddle demonstriert es.

Update:

Offenbar Chrom verhält sich anders auf verschiedenen OS‘(oder Versionen).

Das Problem scheint jedoch mit der 3D-Natur Ihrer Transformationen in Zusammenhang zu stehen (transform-style: preserve-3D). Wenn ich eine explizite Perspektive einstelle, funktioniert es auf meinem Rechner, obwohl es immer noch ein wenig wackelig ist.

Updated JSFiddle

Sie könnten auch feststellen, dass jetzt alles ein bisschen verschwommen aussieht, da die 3D „lösen“ Inhalt aus dem Netz Pixel transformiert durch nahezu Ebene näher an den Betrachter zu heben.