【CSS3】Transitions & Transforms アニメーション

Modernizrのサポートを得て、グレースフルデグレデーションを実現したバージョン

by funato

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<header>Yet Another Flip Photo Gallery</header>
<ul id="photo">
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/nightlife/7/">
            <div class="detail">
                 <h3>ばぁ</h3>

                <p>夜のバーである。オヤジが知ったふうな口でウイスキーを語るのだが、知識が浅はかなこと甚だしい。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/technics/2/">
            <div class="detail">
                 <h3>DJ</h3>

                <p>世の中デジタル化のせいで、猫も杓子も馬鹿もDJである。アナログのスクラッチこそ真髄と思い知れ。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/food/9/">
            <div class="detail">
                 <h3>バーガー</h3>

                <p>こんなものばかり食っていては、早死するばかりである。和食こそ美なり。</p>
            </div>
        </div>
    </li>
    <li class="group slide">
        <div class="inner">
            <img src="http://lorempixel.com/150/150/cats/4/">
            <div class="detail">
                 <h3>にゃん</h3>

                <p>腹が減ったら、軒先に現れる。なんともふてぶてしい猫である。可愛いので許す。</p>
            </div>
        </div>
    </li>
</ul>

CSS

header {
    background: orange;
    margin-bottom: 30px;
    padding: 10px 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-family: Helvetica, san-serif;
}
img {
    vertical-align: bottom;
}
#photo {
    width: 320px;
    margin: 0 auto;
}
#photo li {
    margin: 5px;
    float: left;
    position: relative;
}
#photo li img {
    display: block;
}
#photo li .detail {
    position: absolute;
    background: #fff;
    width: 150px;
    height: 150px;
    bottom: 0;
}
#photo li .detail h3 {
    padding: 10px 0;
    margin-bottom: 10px;
    text-align: center;
    color: purple;
    font-size: 120%;
    font-weight: bold;
}
#photo li .detail p {
    line-height: 110%;
    font-size: 80%;
}

/* 新しいブラウザ用 */
.flip{
    -webkit-perspective:800px;
    -moz-perspective:800px;
    perspective:800px;
}
.flip .inner{
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-webkit-transform 1s;
    transition:-webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flip .flipper,.flip .detail{
    transform:rotateY(-180deg);
       -webkit-transform:rotateY(-180deg);
        -moz-transform:rotateY(-180deg);
   
}
.flip img,
.flip .detail{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip .detail{}
/* 古いブラウザ用 */
#photo li.slide{overflow:hidden;}
#photo li.slide detail{bottom:-150px;}

JavaScript

if ($('html').hasClass('csstransforms3d')){
    $('.group').removeClass('slide').addClass('flip');
    $('.group').hover(
      function(){
      $(this).find('.inner').addClass('flipper');
},
function(){
    $(this).find('.inner').removeClass('flipper');
}
    );
}else{
    $('.group').hover(
        function(){
        $(this).find('.detail').stop()
        .animate({'bottom':0},500,'easeOutCubic');
    },
                      function(){
                           $(this).find('.detail').stop()
        .animate({'bottom':-150},500,'easeOutCubic');
                      }
    );  
}