当旋转90度时,CSS 3D立方体旋转到侧面,父元素错误地旋转到表面上方,但是当89.9deg时不旋转

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);
    ...
}

但是如果你在开发者工具中检查计算出的样式,你会发现它是becoms

-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

(为什么这个作品对我来说并不清楚,但其他人也在这样做.)

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

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

见http://jsfiddle.net/GxJLV/4/(原文,http://jsfiddle.net/GxJLV/8/简化版)

这会导致按钮上的一些闪烁.