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變換的時候幫了我很多。 這絕對值得一讀。

Answer 2

翻滾底邊是什么時候？

如果是這樣，它正在運行mouseenter事件，那么之后就會發生mouseleave事件，因此它永遠不會完全動畫化。

將日志添加到您的Javascript以獲取問題中的代碼

$('.employee_container').hover(
  function(){
    $(this).addClass('active');
    console.log('over');
  },
  function(){
    $(this).removeClass('active');
    console.log('off');
  }
);

在動畫完成之前，您可能需要添加一些不運行mouseleave事件的內容。

像這樣的東西看小提琴http://jsfiddle.net/vDQwQ/10/

var animating = false;
var callback = function(){ 
  animating = false 
};

$('.employee_container').hover(
  function(){

    if(animating) return;
    animating = true;

    $(this).addClass('active');

    //set small delay
    setTimeout(callback, 100);

  },
  function(){

    if(animating) return;
    animating = true;

    $(this).removeClass('active');

    //set small delay
    setTimeout(callback, 100);
  }
);

如果你快速翻滾並且很快就會感到困惑。

防止這樣的事情的最好方法是使其在點擊而不是懸停上工作。

希望這可以幫助