Html CSS 3D变换奇怪的行为

我试图显示动画长方体，但我遇到了渲染问题。在Firefox和Chrome浏览器中，我的立方体的侧面板也通过前面板出现了故障

这是我原版的密码笔：

我已经缩小了Chrome的问题，当立方体处于原始状态时（没有在任何地方旋转），只添加了正面和左侧面板。以下代码将在Chrome上产生问题：

您可能需要调整面板的宽度，以查看结果，因为“透视+实际”可能会抑制该问题

.container{
宽度：100%；
透视图：1000px；
}
c{
位置：相对位置；
宽度：200px；
高度：200px；
浮动：左；
变换样式：保留-3d；
}
p{
位置：绝对位置；
左：0；
排名：0；
宽度：200px；
高度：200px；
背面可见性：隐藏；
}
.前线{
背景：#f00；
}
.这边{
背景：#0a0；
变换：旋转（-90度）平移3D（-100px，0px，100px）；
}