无法选择3d css立方体面内的元素.奇怪

Question

我正在构建一个3d css立方体菜单.代码在这里.

<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

经过非常非常多的努力，我终于设法解决了不可点击和不可选择的问题。

为了使立方体的侧面可选择，需要“透视”属性（如@Cedric Reichenbach建议的那样）；但作为副作用，由于透视渲染而发生像素化。我尝试使用大透视数（10000px）来消除像素化，但像素化仍然存在。因此，通过增加透视数，渲染 z 平面将变得“更远”，从而呈现出透视更少的外观。

经过两天的各种实验之后，我“欺骗”透视的方法是使用非常大的数字进行透视。( perspective: 10000000px;) 现在像素化效果消失了，立方体的侧面可以单击和选择。

这是解决方案的演示。