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

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 中链接有效，但在 chrome 和 chromium 中无效。

Answer 1

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

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

这是您修改后的 JSFiddle演示它。

更新:

显然，chrome 在不同操作系统(或版本)上的行为不同。

但是，问题似乎与转换的 3D 特性有关 (transform-style: preserve-3D)。设置明确的视角时，它可以在我的机器上运行，但仍然有点不稳定。

Updated JSFiddle

您可能还会注意到，现在一切看起来都有些模糊，因为 3D 通过虚拟提升平面使其更靠近观看者来转换“分离”像素网格中的内容。