在Chrome中,我正在尝试旋转一个多维数据集,但在此之后,该方突然不是难以处理的,并且父元素似乎优先.
但是,当我将该元素指针 – events：none时,body标签是第一个元素,因此在旋转90deg之后由于某种原因它会失去它的交互.
但是,当我将该元素指针 – 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/简化版)
这会导致按钮上出现一些闪烁.
