CSS 3D-cube旋转到侧面，旋转90度时父元素错误地高于表面，但当旋转89.9度时不会

Question

在 Chrome 中，我正在尝试旋转一个立方体，但在那之后，侧面突然变得不那么棘手了，并且父元素似乎优先。 但是，当我制作该元素 pointer-events: none 时，body 标记是第一个元素，因此在旋转 90deg 后出于某种原因它失去了交互。

然而，当我只旋转它89.9deg时，没有问题，我可以与侧面的元素进行交互，我尝试摆弄translateZ，但这没有帮助。

我在这里重新创建了它： http://jsfiddle.net/TrySpace/GxJLV/

而且，在 Firefox 中它可以正常工作...

任何熟悉此错误/差异以及如何修复它的人？

- 我正在旋转的容器元素似乎失去了所有交互，因为该容器元素是检查器中的一个平面，它包含 3d 元素，因此从侧面看的平面上没有交互？

更新：http://jsfiddle.net/TrySpace/GxJLV/2/（89.9 度仍然有效...）

Answer 1

您受到舍入错误和 Chrome 对命中测试处理的影响（至少有 http://crbug.com/126479 - 该错误未关闭，最近发布的补丁未修复您的案例 AFAICT）。

作为参考，这里是一个简化版的小提琴，去掉了额外的 html 和 css：http://jsfiddle.net/GxJLV/7/

修复，备选方案 1

您正在指定

.show-right {
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    ...
}

但如果你在开发者工具中检查计算的样式，你会发现它变成了

-webkit-transform: matrix3d(0.00000000000000006123233995736766, 0, 1, 0,
                            0, 1, 0, 0, -1,
                            0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1);

这导致旋转的 div 和按钮以 3d z 顺序位于主体下方。如果您将 rotate3d 替换为

.show-right {
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
    ...
}

命中测试将起作用（参见 http://jsfiddle.net/GxJLV/3/ 对原始版本，http://jsfiddle.net/GxJLV/10/ 对简化版本）。

修复，备选方案 2

（我不清楚为什么会这样，但other people are doing it as well。）

在旋转元素的父级上设置(-webkit-)perspective：

.view {
    -webkit-perspective: 100000px;
}

参见http://jsfiddle.net/GxJLV/4/（原始，http://jsfiddle.net/GxJLV/8/ 简化）

这会导致按钮闪烁。