偷盗：百科的翻板动画

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