偷盗：百科的翻板动画

http://baike.baidu.com/　　

偷盗：百科的翻板动画　

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".card").mouseenter(function(){
        $(this).find('.flip').removeClass('flip2front').addClass('flip2back');
        $(this).find('.flip').find('.back').show();
        $(this).find('.flip').find('.front').hide();
    });
    $(".card").mouseleave(function(){
        $(this).find('.flip').removeClass('flip2back').addClass('flip2front');
        $(this).find('.flip').find('.back').hide();
        $(this).find('.flip').find('.front').show();

    });
});
</script>
<style type="text/css">
#userCards .flip2front{background:#999;}
#userCards .flip2back{background:#f90;}
#userCards .back{display:none;}
#userCards .front{display:block;}
#userCards .card {width:217px;margin-right:15px;}
#userCards .card {position:relative;float:left;}
#userCards {width:680px;height:535px;position:relative;*zoom:1;float:left}

#userCards:after {content:'\0020';display:block;height:0;font-size:0;clear:both;overflow:hidden;visibility:hidden}
#userCards .card {position:relative;float:left;}
#userCards .card .flip {height:495px;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d
}
#userCards .card .flip.flip2back {
    -webkit-transform:perspective(1280px) rotateY(-180deg);
    -ms-transform:perspective(1280px) rotateY(-180deg);
    transform:perspective(1280px) rotateY(-180deg);
    -webkit-animation-name:flipToBack;
    -webkit-animation-duration:500ms;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode:none;
    -webkit-animation-play-state:running;
    animation-name:flipToBack;
    animation-duration:500ms;
    animation-timing-function:ease-in-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode:none;
    animation-play-state:running
}
#userCards .card .flip.flip2front {
    -webkit-animation-name:flipToFront;
    -webkit-animation-duration:500ms;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode:none;
    -webkit-animation-play-state:running;
    animation-name:flipToFront;
    animation-duration:500ms;
    animation-timing-function:ease-in-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode:none;
    animation-play-state:running
}
#userCards .card .flip .front {
    position:absolute;top:0;left:0;height:495px;
    -webkit-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg)
}

#userCards .card .flip .back {
    display:none;position:absolute;top:0;left:0;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
@-webkit-keyframes flip2back {from {-webkit-transform:perspective(1280px) rotateY(0)}to {-webkit-transform:perspective(1280px) rotateY(-180deg)}}
@keyframes flipToBack {from {transform:perspective(1280px) rotateY(0)}to {transform:perspective(1280px) rotateY(-180deg)}}

@-webkit-keyframes flip2front {from {-webkit-transform:perspective(1280px) rotateY(-180deg)}to {-webkit-transform:perspective(1280px) rotateY(0)}}
@keyframes flipToFront {from {transform:perspective(1280px) rotateY(-180deg)}to {transform:perspective(1280px) rotateY(0)}}
</style>

<div id="userCards">

  <div class="card users">
    <div class="flip flip2front">
      <div class="back">back</div>
      <div class="front">front</div>
    </div>
  </div>

  <div class="card campus">
    <div class="flip flip2front">
      <div class="back">back</div>
      <div class="front">front</div>
    </div>
  </div>
</div>

 

 

 

..