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

作为参考,这里是一个简化版的小提琴,删除了额外的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/简化版)

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