Chrome 进行 3d 旋转时无法使顶部元素不可见而底部元素可见（firefox 有效）

Question

检查下面的代码片段（在 Chrome 中，它在 Firefox 中运行）并看到旋转后的结果应该是绿色，但实际上是蓝色。

.wrapper {
display: block;
position: absolute;
top: 0; left: 0;
width: 200px;
height: 200px;
backface-visibility: visible; /* this is needed */
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)}
}

<div class="wrapper">
<div class="green"></div>
<div class="blue"></div>
</div>

如何解决这个问题？我尝试使用 z-index 但无法在包装器动画（这是可控的）内操作子节点的 z-index。否则静态设置z-index是没有用的。

以上是我的 CSS 转换库的一部分（现场演示 here），转换是从原始图像开始，旋转然后显示最终图像（如翻转卡片一侧有一个图像，另一侧有第二个图像）。但是在 chrome 它失败了，但是我将其设置为显示原始图像或显示最终图像。

Answer 1

使用transform-style: preserve-3d;到class = wrapper 同时从 .wrapper 中删除 overflow:hidden（如果存在），因为它似乎与 3d 内容有关。

.wrapper {
display: block;
position: absolute;
top: 0; left: 0;
width: 200px;
height: 200px;
backface-visibility: visible; /* this is needed */
animation:rotate 2s ease 0s 1 normal both running;
transform-style: preserve-3d;
}
.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)}
}

<div class="wrapper">
<div class="green"></div>
<div class="blue"></div>
</div>

Chrome 进行 3d 旋转时无法使顶部元素不可见而底部元素可见（firefox 有效）

Chrome fails to make top element invisible and bottom element visible when doing 3d rotation (firefox works)

css

3d