效果带抖动翻转隐藏，使用帧动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style type="text/css"> .wrap{position:relative;width: 400px;height: 300px;margin: 100px auto;-webkit-perspective: 800px;} .list{width: 400px;height:300px;-webkit-transform-style: preserve-3d;} li{position:absolute;width: 400px;height: 300px;overflow: hidden;-webkit-transform-origin:bottom;opacity: 0;-webkit-transform: rotateX(-180deg);} li a{display: block;width: 400px;height: 300px;} img{width: 100%;height: 100%;} .prev,.next{position: absolute;top: 130px;width: 60px;height: 30px;text-align: center;line-height: 30px;background: #ccc;cursor: pointer;} .prev{left: -100px;} .next{right: -100px;} @-webkit-keyframes hide{ 0%{ -webkit-transform: rotateX(0); opacity: 1; } 100%{ -webkit-transform: rotateX(180deg); opacity: 0; } } @-webkit-keyframes show{ 0%{ -webkit-transform: rotateX(180deg); opacity: 0; } 50%{ -webkit-transform: rotateX(-30deg); opacity: 1; } 60%{ -webkit-transform: rotateX(20deg); opacity: 1; } 70%{ -webkit-transform: rotateX(-18deg); opacity: 1; } 80%{ -webkit-transform: rotateX(15deg); opacity: 1; } 90%{ -webkit-transform: rotateX(-8deg); opacity: 1; } 100%{ -webkit-transform: rotateX(0deg); opacity: 1; } } .hide{-webkit-animation: 500ms hide;-webkit-transform: rotateX(180deg);opacity: 0;} .show{-webkit-animation: 1s show;-webkit-transform: rotateX(0deg);opacity: 1;} </style> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById("list"); var aLi=oUl.getElementsByTagName("li"); var oPrev=document.getElementById("prev"); var oNext=document.getElementById("next"); var num=0; aLi[num].className='show'; oPrev.onclick=function(){ aLi[num%aLi.length].className="hide"; num--; if(num<0){ num=aLi.length-1; } aLi[num%aLi.length].className="show"; } oNext.onclick=function(){ aLi[num%aLi.length].className="hide"; num++; aLi[num%aLi.length].className="show"; } } </script> </head> <body> <div class="wrap"> <ul class="list" id="list"> <li><a href="javascript:;"><img src="../img/css31.jpg"/></a></li> <li><a href="javascript:;"><img src="../img/css32.jpg"/></a></li> <li><a href="javascript:;"><img src="../img/b.jpg"/></a></li> <li><a href="javascript:;"><img src="../img/c.jpg"/></a></li> </ul> <span class="prev" id="prev">上一张</span> <span class="next" id="next">下一张</span> </div> </body> </html>