3d图片切换（css3帧动画）

效果带抖动翻转隐藏，使用帧动画

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

 

posted @ 2016-12-08 18:04  rain92  阅读(303)  评论(0)  编辑  收藏  举报