Chrome执行3D旋转时顶部元素不隐藏底部元素不显示（火狐正常）如何修复

问题根因 #

Chrome对CSS 3D变换的上下文处理遵循更严格的规范要求：默认元素的transform-style属性值为flat，会将所有子元素扁平化渲染到当前元素的2D平面，子元素的3D变换、backface-visibility设置都无法在独立的3D空间中生效，这就是你代码里旋转结束后仍然显示蓝色的原因。Firefox对该场景做了额外兼容，所以能得到预期结果。

修复方案 #

只需要在.wrapper的CSS规则中新增transform-style: preserve-3d配置，让父容器保留3D空间，子元素的3D属性就能正常生效，不需要额外调整z-index。

修复后的完整CSS代码如下：

.wrapper {
display: block;
position: absolute;
top: 0; left: 0;
width: 200px;
height: 200px;
backface-visibility: visible; /* this is needed */
transform-style: preserve-3d; /* 新增该行修复Chrome异常 */
animation:rotate 2s ease 0s 1 normal both running;
}
.green {
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: green;
backface-visibility: visible;
transform: rotateX(180deg);
}
.blue{
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: blue;
backface-visibility: hidden;
transform: rotateX(0deg);
}
@keyframes rotate{
from{transform:rotateX(0deg)}
to{transform:rotateX(-180deg)}
}

补充说明 #

如果需要增强3D旋转的透视效果，可以在.wrapper的父级容器上添加perspective属性调整视觉深度，不会影响你过渡库的原有逻辑。

内容的提问来源于stack exchange，提问作者Nikos M.