css3+原生javascript实现3D翻转相册

一、’在线demo演示

点我观看在线demo演示

二、代码部分

CSS代码
        body{
            margin: 0;
            background-color: #333;
        }
        .wrap{
            overflow: hidden;
            width: 1200px;
            height: 358px;
            margin: 100px auto 0;
        }
        .wrap .contain{
            position: relative;
            transform-style: preserve-3d;
            -webkit-perspective: 600px;
            -webkit-perspective-origin: 50% 50%;
            width: 600px;
            height: 300px;
            margin: auto;
        }
        .wrap .contain .pic{
            transition: visibility .9s,transform 1s;
            transition-timing-function: linear;
            position: absolute;
            transform-origin: bottom;
            transform: rotateX(90deg);
            width: 100%;
            height: 100%;
        }
        .wrap .contain .cur{
            transform: rotateX(0deg);
            visibility:visible;
        }
        .wrap .contain .previous{
            transform: rotateX(-90deg);
            visibility: hidden;
        }
        .wrap .contain .next{
            transform: rotateX(90deg);
            visibility: hidden;
        }
        .wrap .contain .pic:nth-child(1){
            background: url("images/01.jpg") no-repeat center/cover;
        }
        .wrap .contain .pic:nth-child(2){
            background: url("images/02.png") no-repeat center/cover;
        }
        .wrap .contain .pic:nth-child(3){
            background: url("images/03.png") no-repeat center/cover;
        }
        .wrap .contain .pic:nth-child(4){
            background: url("images/04.png") no-repeat center/cover;
        }
        .wrap .contain .pic:nth-child(5){
            background: url("images/05.jpg") no-repeat center/cover;
        }
        .wrap .btn{
            margin-top: 35px;
            text-align: center;
        }
        .wrap .btn button{
            width: 70px;
        }

HTML代码
    <div class="wrap">
        <div class="contain">
            <div class="pic cur"></div>
            <div class="pic"></div>
            <div class="pic"></div>
            <div class="pic"></div>
            <div class="pic"></div>
        </div>
        <div class="btn">
            <button>UP</button>
            <button>DOWN</button>
        </div>
    </div>

JS代码
    <script>
        var aButton= document.getElementsByTagName("button"),
            aPic= document.getElementsByClassName("pic"),
            num1= 0,
            num2= 1,
            len= aPic.length;
            aButton[0].onclick= function(){
                if(num1 <= 1){
                    num1= 1;
                    num2= 2;
                }
                aPic[num1-1].className= "pic cur";
                aPic[num2-1].className= "pic next";
                num1--;
                num2--;
            }
            aButton[1].onclick= function(){
                if(num2 >= len){
                    num2= len-1;
                    num1= num2-1;
                }
                else{
                    aPic[num1].className= "pic previous";
                }
                aPic[num2].className= "pic cur";
                num1++;
                num2++;
            }
    </script>