CSS3 / Chrome：锚点在 CSS3 多维数据集中不可点击

Question

Fiddle: http://jsfiddle.net/ab0Lf117/

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

我试过使用 <img> 而不是背景图片，我也试过将立方体的整个面变成锚而不是 div 中的锚。

我猜这是由于转换造成的，但我真的没有任何线索。

它在 Firefox 中按预期工作（Fiddle 有点错误）

任何对此的帮助都会很棒，因为我很好而且真的被困住了！

Answer 1

问题出在盒子元素垂直于视图，所以不是"clickable"或"viewable"，然后错误地传播了这个对后代的行为。

这不会发生 几乎 - 但不等于 - 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

CSS3 / Chrome：锚点在 CSS3 多维数据集中不可点击

CSS3 / Chrome: Anchors not clickable in CSS3 Cube

css

google-chrome

css-transitions