鼠标点击后的CSS3跑马灯效果

代码：

CSS：

     /*旋转木马*/
                #rotate_container li {
            width: 128px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
            position: absolute;
            bottom: 0;
            list-style-type:none;
        }

           #rotate_container li img {
                width: 128px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
                vertical-align: middle;
            }

            #rotate_container li span {
                display: block;
                width: 128px;
                text-align: center;
                color: #fff;
                font-size: 8px;
                background-color:#f58214;
            }

        #stage {
            position: relative;
            width: 660px;
            height: 330px;

            background: url('image/head_center.jpg') no-repeat;
            background-position:100% 100%;
            margin-right: 5px;
            float: left;
            -webkit-perspective: 1200px;
            z-index: 0;
        }

        #rotate_container {
            background: url("image/indexlogo.jpg") no-repeat 0 0;
            background-size: 100% 100%;
            width: 128px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
            height: 100px;
            margin-left: -64px;
            -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
            -webkit-transform-style: preserve-3d;
            position: absolute;
            left: 50%;
            padding-left: 0px;
            margin-top: 190px;
        }

       #rotate_container li:nth-child(0) {
            -webkit-transform: rotateY(0deg) translateZ(300px);
        }

       #rotate_container li:nth-child(1) {
            -webkit-transform: rotateY(40deg) translateZ(300px);
        }

       #rotate_container li:nth-child(2) {
            -webkit-transform: rotateY(80deg) translateZ(300px);
        }

       #rotate_container li:nth-child(3) {
            -webkit-transform: rotateY(120deg) translateZ(300px);
        }

       #rotate_container li:nth-child(4) {
            -webkit-transform: rotateY(160deg) translateZ(300px);
        }

       #rotate_container li:nth-child(5) {
            -webkit-transform: rotateY(200deg) translateZ(300px);
        }

       #rotate_container li:nth-child(6) {
            -webkit-transform: rotateY(240deg) translateZ(300px);
        }

       #rotate_container li:nth-child(7) {
            -webkit-transform: rotateY(280deg) translateZ(300px);
        }

       #rotate_container li:nth-child(8) {
            -webkit-transform: rotateY(320deg) translateZ(300px);
        }

       #rotate_container li:nth-child(9) {
            -webkit-transform: rotateY(360deg) translateZ(300px);
        }
       /*旋转木马结束*/

JS：

var transform = function (element, value, key) {
            key = key || "Transform";
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix) {
                element.style[prefix + key] = value;
            });

            return element;
        }


        $(function () {
            var deg = -40, i = 1;
            $("#rotate_container").click(function () {
                transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")
            });
        });

HTML：

            <div id="stage">
                <ul id="rotate_container">
                    <li>
                        <img src="image/img1.jpg" />
                        <span>诺克萨斯之手</span>
                    </li>
                    <li>
                        <img src="image/img2.jpg" />
                        <span>放逐之刃</span>
                    </li>
                    <li>
                        <img src="image/img3.jpg" />
                        <span>刀锋意志</span>
                    </li>
                    <li>
                        <img src="image/img4.jpg" />
                        <span>刀锋之影</span>
                    </li>
                    <li>
                        <img src="image/img5.jpg" />
                        <span>德玛西亚之翼</span>
                    </li>
                    <li>
                        <img src="image/img6.jpg" />
                        <span>流浪法师</span>
                    </li>
                    <li>
                        <img src="image/img7.jpg" />
                        <span>德玛西亚之力</span>
                    </li>
                    <li>
                        <img src="image/img8.jpg" />
                        <span>不祥之刃</span>
                    </li>
                    <li>
                        <img src="image/img9.jpg" />
                        <span>殇之木乃伊</span>
                    </li>
                </ul>
            </div>

效果：