无法选择 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>

当'flip button'按钮翻转面时，无法点击立方体右侧的link。

知道为什么吗？在 firefox 中，link 有效，但在 chrome 和 chromium 中无效。

Answer 1

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

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

这是您修改后的 JSFiddle 演示。

更新：

显然，chrome 在不同的 OS'（或版本）上表现不同。

但是，问题似乎与转换的 3D 性质有关 (transform-style: preserve-3D)。当设置一个明确的视角时，它在我的机器上工作，但仍然有点不稳定。

Updated JSFiddle

您可能还会注意到，现在一切看起来都有些模糊，因为 3D 变换 "detach" 像素网格中的内容实际上是将平面提升到更靠近观看者的位置。

Answer 2

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

要使立方体的边可选择，需要 'perspective' 属性（正如@Cedric Reichenbach 所建议的）；但作为副作用，由于透视渲染会发生像素化。我试图用一个大的透视数字（10000px）来摆脱像素化，但像素化仍然存在。因此，通过增加透视数，渲染 z 平面将 'further away' 呈现较少透视的外观。

经过两天的试验，我 'tricked' 的视角是使用非常大的数字作为视角。 (perspective: 10000000px;)现在像素化效果消失了，立方体的边可以点击和选择了。

Here 是解决方案的演示。

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

Elements within a face of a 3d css cube cannot be selected. Strange

html

css

google-chrome

firefox

chromium