3D Flip

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style id="css">

    *{

        margin: 0;

        padding: 0;

    }

    li{

        list-style-type: none;

    }

    .wrap{

        width: 500px;

        height: 300px;

        margin: 50px auto;

        box-shadow: 0 0 120px #333;

        position: relative;

    }

    /*..................li style.................*/

    .piclist{

        width: 100%;

        height: 300px;    /*caution*/

        -webkit-perspective:800px;    /*景深*/

        overflow: hidden;

    }

    .piclist li{

        height: 300px;

        position: relative;

        float: left;

        -webkit-transform-style:preserve-3d;

        -webkit-transform-origin:center center -150px; /*注意-150px*/

    }

    .piclist li a{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

    }

    .piclist li a:nth-of-type(1){

        background: url(a.jpg) no-repeat;

    }

    .piclist li a:nth-of-type(2){

        background: url(b.jpg) no-repeat;

        top: -300px;

        -webkit-transform-origin:bottom;

        -webkit-transform:rotateX(90deg);

        /*-webkit-transform-origin:top;

        -webkit-transform:rotateX(-90deg);*/

    }

    .piclist li a:nth-of-type(3){

        background: url(c.jpg) no-repeat;

        -webkit-transform:translateZ(-300px) rotateX(180deg);    /*翻转过来*/

    }

    .piclist li a:nth-of-type(4){

        background: url(d.jpg) no-repeat;

        top: 300px;

        -webkit-transform-origin:top;

        -webkit-transform:rotateX(-90deg);

        /*-webkit-transform-origin:bottom;

        -webkit-transform:rotateX(90deg);*/

    }

    .piclist li span{

        background-color: #333;

        position: absolute;

        top: 0;

        width: 300px; /*注意这里大小和a的大小是不一样的喔*/

        height: 300px;

    }

    .piclist li span:nth-of-type(1){

        left: 0;    /*靠左*/

        -webkit-transform-origin:left;

        -webkit-transform:rotateY(90deg);

    }

    .piclist li span:nth-of-type(2){

        right: 0;    /*靠右*/

        -webkit-transform-origin:right;

        -webkit-transform:rotateY(-90deg);

    }

    /*......................btn sytle............*/

    .btnlist{

        position: absolute;

        right: 0;

        bottom: -50px;

    }

    .btnlist li{

        float: left;

        width: 30px;

        height: 30px;

        text-align: center;

        background-color: gray;

        margin-right: 10px;

        border-radius: 50%;

        font: italic 16px/30px "Arial";

        cursor: pointer;

        color: #fff;

        -webkit-user-select:none;

    }

    .btnlist .active{

        background-color: orange;

    }

    </style>

</head>

<body>

    <div class="wrap">

        <ul class="piclist" id="piclist">

            <!-- <li>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <a href="javascript:;"></a>

                <span></span>

                <span></span>

            </li> -->

        </ul>

        <ol class="btnlist" id="btnlist">

            <li class="active">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ol>

    </div>

    <script>

    var oPic=document.getElementById("piclist");

    var aPicList=oPic.getElementsByTagName("li");

    var oBtn=document.getElementById("btnlist");

    var aBtnLi=oBtn.getElementsByTagName("li");

    var oCss=document.getElementById("css");

    var sCss="";

    var oneW=100;    //调整此li宽度或间隔时间来调整效果

    var iNum=parseInt(oPic.clientWidth/oneW);

    var iZindex=0;

    var sPic="";

    var arrZ=[];

    for(var i=0;i<iNum;i++){

        i>iNum/2?iZindex--:iZindex++;

        arrZ.push(iZindex);

        sPic+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><span></span><span></span></li>';

        sCss+=".piclist li:nth-of-type("+(i+1)+"){z-index:"+iZindex+";}";    //z-index:iZindex(X)凡是(只有)变量都是"+var+"，此地外层用双引号

        sCss+=".piclist li:nth-of-type("+(i+1)+") a{background-position:-"+oneW*i+"px 0;}";

    }

    oPic.innerHTML=sPic;

    oCss.innerHTML+=sCss;

    //或者这样加z-index

    // for(var i=0;i<iNum;i++){

    //     aPicList[i].style.zIndex=arrZ[i];  //一定要在oPic.innerHTML=sPic;后设置z-index

    // }

    for(var i=0;i<aPicList.length;i++){

        aPicList[i].style.width=oneW+"px";

    }

    var iNow=0;

    for(var i=0;i<aBtnLi.length;i++){

        (function(index){

            aBtnLi[index].onclick=function(){

                for(var i=0;i<aPicList.length;i++){

                    aPicList[i].style.WebkitTransition=".5s "+i*100+"ms";

                    aPicList[i].style.WebkitTransform="rotateX(-"+(index*90)+"deg)";    //index*90

                }

                //console.log(index);

                aBtnLi[iNow].className="";

                aBtnLi[index].className="active";    //注意这里aBtnLi[index]

                iNow=index;

            };

        })(i);

    }

    </script>

</body>

</html>
巴特西

3D Flip

最新文章

热门文章
