简单3D翻转

1、先上图~~~

2、代码

 html部分

 1 <body>
 2     <div id="my3d">
 3         <div id="box">
 4             <div id="li1" class="li">1</div>
 5             <div id="li2" class="li">2</div>
 6             <div id="li3" class="li">3</div>
 7             <div id="li4" class="li">4</div>
 8             <div id="li5" class="li">5</div>
 9             <div id="li6" class="li">6</div>
10         </div>
11     </div>
12     <div class="btns">
13         <a href="javascript:prev();" id="prev">prev</a>
14         <a href="javascript:next()" id="next">next</a>
15     </div>
16 </body>

 

css部分

#my3d{
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 50%;
        overflow: hidden;
    }
    #box{
        width: 400px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        -webkit-transform-style: preserve-3d;
    }
    .li{
        width: 400px;
        height: 400px;
        line-height: 400px;
        text-align: center;
        font-size: 300px;
        color: #fff;
        background: #000;
        position: absolute;
        
        -webkit-transform-origin: bottom;
        -webkit-transform: rotateX(90deg);
        -webkit-transition: -webkit-transform 1s linear;
    }
    .li:first-child{
        -webkit-transform: rotateX(0deg);
    }
    .btns{
        text-align: center;
    }

 

js部分

var index = 1;
function prev(){
    if (index==1) {
        return false;
    };
    var cur = document.getElementById('li'+index);
    cur.style.webkitTransform="rotateX(90deg)";

    index--;

    var prev = document.getElementById('li'+index);
    prev.style.webkitTransform="rotateX(0deg)";

}
function next(){
    if (index==6) {
        return false;
    };
    var cur = document.getElementById('li'+index);
    cur.style.webkitTransform="rotateX(-90deg)";

    index++;

    var next = document.getElementById('li'+index);
    next.style.webkitTransform="rotateX(0deg)";
}

 

源码下载

 

posted @ 2016-06-07 15:02  Jerry24  阅读(229)  评论(0)  编辑  收藏  举报