0

我尝试使用 CSS3 的 transform 属性翻转一个 div，但它在 Firefox 中没有正确呈现。

演示在这里：http: //jsfiddle.net/6zyzu/5/
将鼠标放在红色方块上，看看问题所在。
（在 Firefox 中旋转红色方块时，红色方块背面的文字隐藏在前一个方块（蓝色）下，然后旋转动画完成后，文字跳到蓝色方块上方）。

下面的代码：

HTML：

<div></div>
<div id="s1" class="flip-container">
    <div class="flipper">
        <div class="front"><p>front</p></div>
        <div class="back"><p>back</p></div>
    </div>
</div>
<div id="s2" class="flip-container">
    <div class="flipper">
        <div class="front"><p>hello</p></div>
        <div class="back"><p>world</p></div>
    </div>
</div>

CSS：

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;
}
4

1 回答 1

1

好吧，这可能是一种预期的行为，但您并不能确保它会发生:-)

并不是一个真正的普遍答案，而只是向您展示方式：

更新的演示

我添加了

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

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

于 2013-10-14T17:56:21.710 回答