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