CSS3を使ったマウスオーバーフリップアニメーションと非対ブラウザ用にjqueryアニメーションのサンプルソース

CSS3を使ったアニメーションは従来のjavascritpアニメーションに比べ、軽く動作が美しい、表現の幅も広いですが、非対応のブラウザの場合、とても残念になります。
今回はマウスオーバーでフリップアニメーションをCSS3で行い、非対応ブラウザは分岐で別動作をさせせるサンプルを書きます。

必要なファイル

jquery.js
modernizr.js

HTML

...
...
  

    
1
    
2
 

CSS

/* ======================
　　フリップCSS3　アニメーション
===================== */
.flipbox{
    position: relative;

    -webkit-perspective:800px;		
    -moz-perspective:800px;
    -ms-perspective:800px;		   		
    -o-perspective:800px;
    perspective:800px;
}

.flipbox .front,
.flipbox .back{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;			
    -ms-transform-style: preserve-3d;			
    -o-transform-style: preserve-3d;			
    transform-style: preserve-3d;		

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

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

.flipbox .front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);			
    -ms-transform: rotateY(0deg);			
    -o-transform: rotateY(0deg);			
    transform: rotateY(0deg);
}

.flipbox.flip .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);			
    -ms-transform: rotateY(180deg);			
    -o-transform: rotateY(180deg);			
    transform: rotateY(180deg);
}

.flipbox .back {
    -webkit-transform: rotateY(-179deg);
    -moz-transform: rotateY(-179deg);
    -ms-transform: rotateY(-179deg);
    -o-transform: rotateY(-179deg);
    transform: rotateY(-179deg);	
}
.flipbox.flip .back{
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);			
    -ms-transform: rotateY(0deg);			
    -o-transform: rotateY(0deg);			
    transform: rotateY(0deg);
}
.flipscroll{
    position: relative;
}
.flipscroll .front,
.flipscroll .back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.flipscroll .back{
    display: none;
}

Javascript

CSS3対応と非対応ブラウザで動作を別けるためにmodernizr.jsで分岐処理を入れます。
クラス名flipscrollを対応ブラウザはflipboxにリネーム。

.flipboxはマウスオーバーで.flipクラスが追加されアニメーションを開始。

.flipscrollはjqueryのhoverイベントでアニメーションをさせます。
今回は簡単に.show()と.hide()メソッドで入れ替えただけです。

    if ($('html').hasClass('csstransforms3d')) {
        $('.flipscroll').removeClass('flipscroll').addClass('flipbox');
        $('.flipbox').hover(function() {
            $(this).addClass('flip');
        }, function() {
            $(this).removeClass('flip');
        });
    } else {
        $('.flipscroll').hover(function() {
            panel = $(this);
            panel.children('.front').hide();
            panel.children('.back').show();
        }, function() {
            panel = $(this);
            panel.children('.back').hide();
            panel.children('.front').show();
        });

    }

動作サンプル

ちなみにcss3非対応だと入れ替えになるだけの予定ですが上記ソースは未確認。