Question

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

我不知道为什么，但是在Chrome中我无法点击我的主播（2和4因某些原因而工作），即使在检查时它们显然在那里。

我尝试使用<img>代替背景图片，我也尝试将多维数据集的整个面转变为锚点而不是div中的锚点。

我猜这是由于变换，但我真的没有线索。

它在Firefox中运行正常（小提琴有点儿错误）

任何有关这方面的帮助都会很棒，因为我很好并且真的卡住了！

Answer 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版本中它运行正常（应用了保留-3d风格）

fiddle

CSS3 / Chrome：CSS3 Cube中无法点击的锚点

1 个答案: