CSS3 / Chrome：CSS3 Cube中的锚点不可点击答案

【问题标题】：CSS3 / Chrome: Anchors not clickable in CSS3 CubeCSS3 / Chrome：CSS3 Cube中的锚点不可点击
【发布时间】：2015-09-23 20:05:40
【问题描述】：

小提琴： http://jsfiddle.net/ab0Lf117/

我不知道为什么，但在 Chrome 中我无法点击我的锚点（2 和 4 出于某种原因正在工作），即使它们在检查时显然在那里。

我尝试使用<img> 代替背景图像，我还尝试将立方体的整个面变成锚而不是 div 中的锚。

我猜这是由于变换造成的，但我真的不知道。

它在 Firefox 中按预期工作（Fiddle 有点问题）

在这方面的任何帮助都会很棒，因为我已经完全被困住了！

【问题讨论】：

为我工作。版本 43.0.2357.130（64 位）
@PaulProgrammer 我也在使用 V 43.0.2357.130，但是，32 位。你有什么想法可能是什么问题？立方体“旋转”正确，链接对我来说似乎不可点击
啊，我现在明白了。可能与 z-index 或当前响应事件的显示对象有关。您可能需要将活动跨度的 z-index 提高到一个较高的值（例如 1000）。
@PaulProgrammer 我也试过这个，但无济于事:(

标签： css google-chrome css-transitions

【解决方案1】：

问题是由于盒子元素垂直于视图，因此它不是“可点击”或“可查看”，然后错误地将此行为传播给后代。

这不会发生在几乎 - 但不等于 - 90 度的角度

设置这个

#box {
    position: relative;
    margin: 0 auto;
    height: 600px;
    width: 600px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: rotateX(-89.99deg) rotateY(0deg);
    transform: rotateX(-89.99deg) rotateY(0deg);
    z-index: 10;
}

还有这个

$("#b1").click(function() { calcRotation(89.99, 0); });
$("#b2").click(function() { calcRotation(0, 0); });
$("#b3").click(function() { calcRotation(0, 89.99); });
$("#b4").click(function() { calcRotation(0, 180); });
$("#b5").click(function() { calcRotation(0, 269.99); });
$("#b6").click(function() { calcRotation(269.99, 180); });

它会起作用的。

我相信这是 Chrome 中的一个新错误，我几乎可以肯定在以前的 Chrome 版本中它工作正常（应用了 preserve-3d 样式）

fiddle

【讨论】：

谢谢！比我实施的修复要好得多！