利用css3实现3D轮播图

动画实现主要利用了z-index将层级关系改变，从而实现了焦点图的效果；css3属性 transform rotate 来实现图片的动画效果 。transition实现过度动画！

        * {
            margin: 0;
            padding: 0;
        }        .stage {
            width: 500px;
            height: 280px;
            margin: 100px auto;
            perspective: 1800px;
            position: relative;
        }        img {
            vertical-align: middle;
        }        .stage ul {
            width: 500px;
            height: 280px;
            list-style: none;
        }        .stage ul li {
            width: 500px;
            height: 280px;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 2s ease 0s;
        }        .stage ul .left2 {
            transform: rotateY(30deg) translateX(-380px) translateZ(-20px);
            z-index: 7;
        }        .stage ul .left1 {
            transform: rotateY(40deg) translateX(-280px) translateZ(70px);
            z-index: 8;
        }        .stage ul .king {
            z-index: 9;
        }        .stage ul .right1 {
            transform: rotateY(-40deg) translateX(280px) translateZ(-70px);
            z-index: 8;
        }        .stage ul .right2 {
            transform: rotateY(-30deg) translateX(380px) translateZ(-70px);
            z-index: 7;
        }        .stage ul .bench-warmer {
            z-index: 5;
        }        .stage span {
            display: block;
            width: 60px;
            height: 60px;
            background-color: rgba(0, 0, 255, .5);
            z-index: 20;
            position: absolute;
            color: #fff;
            font-size: 50px;
            line-height: 60px;
            text-align: center;
            margin-top: -30px;
        }        #pre {
            top: 140px;
            left: -380px;
        }        #next {
            top: 140px;
            right: -380px;
        }

window.onload = function() {
            var pre = document.getElementById('pre');
            var next = document.getElementById('next');
            var zhuang = document.getElementById('zhuang');
            var lis = zhuang.getElementsByTagName('li');
            var lock = false;
            var classes = ['left2', 'left1', 'king', 'right1', 'right2', 'bench-warmer', 'bench-warmer', 'bench-warmer', 'bench-warmer'];
            pre.onclick = function() {
                // 在动画播放的时候将锁锁住，判断动画是否在播放，如果在播放，锁住，终止函数的执行用return，没播放就解锁，所以默认是解锁的；
                // 一单击的时候就锁住动画， 所以单击的时候让lock = true;
                if (lock == true) {
                    return;
                }
                // 锁定
                lock = true;                setTimeout(function() {
                        lock = false;
                    }, 2000)
                    // 将classes的第一个取出来， 放在最后一个位置
                var firstclass = classes.shift();
                classes.push(firstclass);
                console.log(classes);
                // 然后将classes给相应的class
                for (var i = 0; i < classes.length; i++) {
                    lis[i].className = classes[i];
                }
            }
            next.onclick = function() {
                // 在动画播放的时候将锁锁住，判断动画是否在播放，如果在播放，锁住，终止函数的执行用return，没播放就解锁，所以默认是解锁的；
                // 一单击的时候就锁住动画， 所以单击的时候让lock = true;
                if (lock == true) {
                    return;
                }
                // 锁定
                lock = true;                setTimeout(function() {
                        lock = false;
                    }, 2000)
                    // var lastclass = classes.pop();
                classes.unshift(classes.pop());
                console.log(classes);
                for (var i = 0; i < classes.length; i++) {
                    lis[i].className = classes[i];
                }
            }
        }

 <div class="stage">
        <ul id="zhuang">
            <li class="left2"><img src="data:images/50/1.jpg" alt=""></li>
            <li class="left1"><img src="data:images/50/2.jpg" alt=""></li>
            <li class="king"><img src="data:images/50/3.jpg" alt=""></li>
            <li class="right1"><img src="data:images/50/4.jpg" alt=""></li>
            <li class="right2"><img src="data:images/50/5.jpg" alt=""></li>
            <li class="bench-warmer"><img src="data:images/50/6.jpg" alt=""></li>
            <li class="bench-warmer"><img src="data:images/50/7.jpg" alt=""></li>
            <li class="bench-warmer"><img src="data:images/50/8.jpg" alt=""></li>
            <li class="bench-warmer"><img src="data:images/50/9.jpg" alt=""></li>
        </ul>
        <span id="pre">&lt;</span>
        <span id="next">&gt;</span>
    </div>