Html 无法选择3d css多维数据集中面内的元素。奇怪的

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

翻转按钮
正面
返回
左边
赖特
底部
顶部

使用“翻转按钮”按钮翻转面时，无法单击立方体右侧的链接

你知道为什么吗？

---

在firefox中，链接起作用，但在chrome和chrome上不起作用。

这是因为您的曲面的

高度
为
0
，导致文本被渲染到填充区域。Firefox和Chrome似乎在鼠标事件方面对这些元素有不同的处理方式

如果使用
height:auto
，它将按预期工作，但应注意高度与内容的变化保持一致

这是你的修改版

更新：

显然，chrome在不同的操作系统（或版本）上表现不同

但是，问题似乎与变换的3D性质有关（
变换样式：preserve-3D
）。当设置一个明确的透视图时，它在我的机器上工作，尽管仍然有点不稳定


您可能还注意到，现在一切看起来都有点模糊，因为3D通过虚拟地将平面提升到更靠近查看器的位置，将内容从像素网格中“分离”出来。
经过非常多的努力，我终于设法解决了不可点击和不可选择的问题

要使立方体的侧面可选，需要“透视”属性（如@Cedric Reichenbach sugested）；但由于透视渲染的副作用，会发生像素化。我试图用一个大的透视数（10000px）来摆脱皮克斯化，但皮克斯化仍然存在。因此，通过增加透视数，渲染z平面将变得“更远”，从而呈现更少透视的外观

在经历了两天的各种实验之后，我“欺骗”了透视图，用了一个非常大的数字作为透视图。（
透视图：10000000px；
）现在像素化效果消失，立方体的侧面可以单击和选择

是解决方案的一个演示。
当再次单击按钮时，您似乎没有在任何位置添加
左旋转
类？@Sterling Archer按钮只是将立方体旋转到右侧。在正面可以单击链接，但在单击翻转按钮后，无法单击右侧的链接。如果您将鼠标悬停在此链接上，光标将不会指向指针。谢谢您的回答。我已经访问了该链接，但似乎仍然无法单击“正确链接”。我已经使用了高度黑客，以获得高度=宽度的响应事项。希望我能在身高=0的情况下侥幸逃脱。这太奇怪了；我在Linux上进行了测试，它工作正常，但在Windows上，它的行为似乎有所不同。。。好吧，你可以在里面使用另一个元素，绝对定位，z-index>1，这样就不会弄乱父母的身高。你很酷。现在唯一的问题是，我放在立方体侧面的每一件东西都有点像素化，因为透视图的缘故。你知道解决这个问题的办法吗？非常感谢。好吧，这毕竟是一种3D效果，这意味着浏览器需要以某种方式渲染类似纹理的内容（想象一个3D游戏），因此清晰度在很大程度上取决于抗锯齿和纹理过滤的效果，这会严重影响性能。我不认为你能告诉浏览器在这里使用什么样的渲染质量（虽然不确定）。问题是我需要在那里设置一个完美的表单。因此，如果表单看起来像pixalated，那么它就不好了。我将继续寻找一个没有皮克斯化效应的解决方案。如果我能找到解决办法，我会把它写在这里。
<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>