Elementy w obrębie sześcianu 3d css nie mogą zostać wybrane. Dziwne

Question

Buduję menu 3d css cube. Kod 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> 

Po obróceniu twarzy przyciskiem "Odwróć" nie można kliknąć łącza z prawej strony sześcianu.

Jakieś pomysły, dlaczego? W firefox link działa, ale na chromie i chromie nie działa.

Answer 1

Po bardzo wielu zmaganiach udało mi się w końcu obejść problem, którego nie można kliknąć i nie można go wybrać.

Aby dokonać wyboru boków sześcianu, potrzebna jest właściwość "perspektywa" (zgodnie z sugestią @Cedric Reichenbacha); ale jako efekt uboczny pojawia się pixalacja z powodu renderowania perspektywy. Próbowałem pozbyć się pixalacji za pomocą dużej liczby perspektywicznej (10000px), ale pixalacja wciąż tam była. Zwiększając liczbę perspektyw, płaszczyzna renderowania znika "dalej", dając wrażenie mniejszej perspektywy.

Po dwóch dniach eksperymentowania z różnymi rodzajami rzeczy tak, jak podszedłem do perspektywy, użyłem bardzo dużej liczby dla perspektywy. (perspective: 10000000px;) Teraz efekt pixalacji zniknął, a boki kostki można klikać i wybierać.

Here to demonstracja rozwiązania.

Answer 2

Dzieje się tak, ponieważ powierzchnie mają height z 0, powodując przekształcenie tekstu w obszar wypełnienia. Firefox i Chrome wydają się traktować takie elementy inaczej pod względem zdarzeń myszy.

Jeśli używasz height: auto, działa zgodnie z oczekiwaniami, ale powinieneś zadbać o to, aby wysokość pozostała spójna ze zmieniającą się zawartością.

Oto zmodyfikowany JSFiddle demonstrujący to.

Aktualizacja:

Najwyraźniej chrom zachowuje się inaczej na różnych OS”(lub wersje).

Jednak problem wydaje się być związany z naturą 3D transformacji (transform-style: preserve-3D). Ustawiając wyraźną perspektywę, działa ona na moim komputerze, chociaż wciąż jest trochę chwiejna.

Updated JSFiddle

Można również zauważyć, że wszystko wygląda nieco rozmyte teraz, ponieważ 3D przekształca „odczepić” treści z siatki pikseli przez praktycznie podnoszenia samoloty bliżej widza.