利用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="images/50/1.jpg" alt=""></li>
            <li class="left1"><img src="images/50/2.jpg" alt=""></li>
            <li class="king"><img src="images/50/3.jpg" alt=""></li>
            <li class="right1"><img src="images/50/4.jpg" alt=""></li>
            <li class="right2"><img src="images/50/5.jpg" alt=""></li>
            <li class="bench-warmer"><img src="images/50/6.jpg" alt=""></li>
            <li class="bench-warmer"><img src="images/50/7.jpg" alt=""></li>
            <li class="bench-warmer"><img src="images/50/8.jpg" alt=""></li>
            <li class="bench-warmer"><img src="images/50/9.jpg" alt=""></li>
        </ul>
        <span id="pre">&lt;</span>
        <span id="next">&gt;</span>
    </div>