6

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

バグを示すためにフィドルを作成しました

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

前もって感謝します

更新: firefox の最新バージョンを実行している 4 台の異なるコンピューター (windows と mac OS) でテストを行いましたが、すべてのコンピューターで同じです。

4

2 に答える 2

10

を宣言しrotateY(-180deg)ているため、ブラウザーはカードをめくるときにどちらの方向を選択するかを選択できます (回転は左からでも右からでもかまいません)。

Chrome は「誤って」両方の面で正しい方向を取り、Firefox は背面で逆の方向を取ります。rotateY(-179deg)(または)を取るrotateY(181deg)と、Firefox は同じ方向を使用するようになります。

固定例

ただし、顔をそのままにして、代わりに親をアニメートする方が、さらに良い方法です。また、そのための JavaScript は必要ありません (導入するコードがはるかに少なくなります:純粋な CSS の例)。

3D 変換に関するこの記事は、私が 3D 変換に取り組み始めたときに大いに役立ちました。間違いなく読む価値があります。

于 2013-06-14T09:34:50.840 に答える
1

下端をロールオーバーしたときですか？

その場合は、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);
  }
);

ロールオーバーしてすぐにアウトすると、混乱する可能性があります。

このようなことを防ぐ最善の方法は、ホバーではなくクリックで機能するようにすることです。

お役に立てれば

于 2013-06-14T09:29:54.200 に答える