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

在Chrome中,我正在尝试旋转一个多维数据集,但在此之后,该方突然不是难以处理的,并且父元素似乎优先.
但是,当我将该元素指针 – events：none时,body标签是第一个元素,因此在旋转90deg之后由于某种原因它会失去它的交互.

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

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

并且,在Firefox中它工作得很好……

有谁熟悉这个错误/差异以及如何解决它？

–
似乎我正在旋转的容器元素失去了它的所有相互作用,因为该容器元素是检查器中的一个平面,它保存了3d元素,因此在从侧面看的平面上没有相互作用？

更新：http://jsfiddle.net/TrySpace/GxJLV/2/(89.9度仍然有效…)

解决方法

你会受到舍入错误和Chrome处理命中测试的影响(至少有7000个 – 这个bug没有关闭,最近登陆的补丁没有修复你的案例AFAICT).

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

修复,替代方案1

你在指定

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

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

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

这导致旋转的div和按钮以3d z顺序位于主体下方.如果你用rotate3d替换

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

命中测试将起作用(参见http://jsfiddle.net/GxJLV/3/反对原始版本,http://jsfiddle.net/GxJLV/10/反对简化版本).

修复,替代方案2

(为什么这个工作对我来说不清楚,但是other people are doing it as well.)

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

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

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

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

原文地址：https://www.jb51.cc/css/215097.html