Firefox中的CSS3翻转动画bug

Question

我用css3创建了一个翻转动画.在webkit浏览器上,翻盖看起来很好,但在firefox中,翻转动画无法正常工作.您可以看到翻转动画有效,但它看起来非常"怪异"并且不会一直翻转.

我的HTML:

<li class="employee">
   <div class="employee_container">
        <div class="front flip">
            <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt="">
        </div>
        <div class="back flip">
            <h2>Title</h2>
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
        </div>
    </div>
</li>

我的CSS:

.employee {
    width:33%;
    float:left;
    display:block;
    padding:0.5em;
    height:20em;
}

.employee_container {
    height:100%;
    position:relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.back, .front {
    border: 3px solid #cecece;
    position:absolute;
}

.front img {
    min-height:100%;
    height:auto;
    width:100%;
}

.front {
    overflow:hidden;
    width:100%;
    height:100%;
    z-index:900;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.active .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.back {
    background-image: url(img/RD.png);
    background-repeat: no-repeat;
    background-position:90% 93%;
    padding:1em;
    background-color:#ecad40;
    height:100%;
    width:100%;
    z-index:800;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.active .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

.back h3 {
    font-weight:normal;
    font-size:0.8em;
}

.back p {
    font-size:1em;
    padding-top:1em;
    border-top:1px dashed white;
    margin-top:1em;
}

我做了一个小提示来展示这个bug

http://jsfiddle.net/vDQwQ/1/

提前致谢

更新:我在运行最新版本的Firefox的4台不同的计算机(Windows和Mac OS)上进行了测试,并且在所有计算机上都是一样的.

Answer 1

由于您声明rotateY(-180deg),浏览器可以选择在翻转卡片时选择的方向(旋转可以从左侧或右侧).

Chrome"意外地"为两个面部采取了正确的方向,firefox以相反的方式为背面.采取rotateY(-179deg)(或rotateY(181deg))将迫使Firefox使用相同的方向.

修复例子

然而,更好的方法是将面部保持原样,而不是为父母制作动画!此外,你不需要javascript(它引入了更少的代码:纯css示例)!

这篇关于3d变换的文章在我开始进入3d变换的时候帮了我很多.这绝对值得一读.