CSS3-moz转换：rotateY未按预期工作

我尝试使用CSS3的transform属性翻转div，但在Firefox中没有正确渲染

此处演示：
把鼠标放在红场上，看看问题所在。
（在Firefox中旋转红方块时，红方块背面的文本隐藏在前一个方块（蓝色）下，然后旋转动画一完成，文本就会跳到蓝色方块上方）。

代码如下：

HTML:

---

嗯，这可能是一种预期的行为，但您不能确保它发生：-）

这并不是一个普遍的答案，只是为了给你指明方向：

我补充说

#s1 {   -moz-transform: translateZ(1000px);}

---

向后发送第一个div；现在，第二个div在整个旋转过程中都是可见的。

对我来说很有效，我没有看到任何问题。您在Firefox上测试了吗？是的，它会翻转，但当您将鼠标悬停在红方块上时，背景色（绿色）有问题。（红色的正方形背面有绿色背景色，绿色在旋转时被前面的正方形（蓝色）隐藏，然后突然出现在上面）我已经更新了JSFIDLE，在背面添加了文本。您可以在Firefox中看到，旋转红方块时，文本位于前一个方块（蓝色）的下方，然后在旋转完成后跳到上方。在Chrome中没有出现这个问题。在Firefox24中没有看到这个问题。我也有Firefox24（Win7）。对我来说，红色方块后面的文字“Lorem ipsum…”在旋转时会在蓝色方块下面。你不是这样吗？？

div { height:200px; width:200px; float:left; margin-right:20px; }
#s2 .front { background-color:#f00; }
#s2 .back { background-color:#0f0; }
#s1 .front { background-color:#00f; }
#s1 .back { background-color:#0ff; }

.flip-container { perspective: 1000; -webkit-perspective: 1000; -moz-perspective: 1000; }
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    filter: FlipH;
    -ms-filter: "FlipH";
}
/* flip speed goes here */
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
/* front pane, placed above back */
.front { z-index: 2; }
/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    width: 300px;
    height: 180px;
}

#s1 {   -moz-transform: translateZ(1000px);}