jquery css 3d旋转demo

参考博客：http://blog.csdn.net/lmj623565791/article/details/32964301

demo在chrome浏览器中测试，具体的属性在各浏览器中的兼容性各位可以自己改一下。

css属性：-webkit-transform-style:preserve-3d;   在3D空间内呈现元素

-webkit-perspective: 1200px;   （谷歌）视图位置，相对元素。（火狐-moz-perspective: 800px;）

-webkit-transition: -webkit-transform 0.8s;（transition: transform 0.8s;）状态转换时间
-webkit-transform: rotateY(180deg);     状态，相对Y轴转180度
-webkit-backface-visibility: hidden; 图片翻转180是否yincang
动态图片不会搞。。。。。。
设计思路：1.10张图片的以position:absolute;方式叠放在一起。第一张中心图片设置tranform:rotateZ(0deg)不动。，其他图片设置tranform:rotateZ(200deg)相对Z轴向外移动200
deg。形成一个圆形。用js实现9张图片相对Y轴做不同角度的旋转。在代码的$(document).ready()中。到这里基本的显示已经完成。
2.点击stage容器，触发click事件。全体的10张图片分别以Y轴转40度，旋转时间在transition：transform 0.8s中设置，形成动画效果。在写一个事件触发器，每隔1.5秒
触发一次stage容器的点击事件。就会形成一个连续的旋转动画。

1.html
<div  id="stage" style="height:100px;">    <ul class="container">        <li id="stageBg">            <img src="/picture/pabupa.jpg" />        </li>        <li>            <img src="/picture/mojian.jpg" />        </li>        <li>            <img src="/picture/kuanjian.jpg" />        </li>        <li>            <img src="/picture/mojian.jpg" />        </li>        <li>            <img src="/picture/kuanjian.jpg" />        </li>        <li>            <img src="/picture/mojian.jpg" />        </li>        <li>            <img src="/picture/kuanjian.jpg" />        </li>        <li>            <img src="/picture/mojian.jpg" />        </li>        <li>            <img src="/picture/kuanjian.jpg" />        </li>        <li>            <img src="/picture/mojian.jpg" />        </li>    </ul></div>
2.css
.container li {    position: absolute;    width: 128px;    display: block;    -webkit-transition: -webkit-transform 0.8s;    transition: transform 0.8s;    text-align: center;}.container li img {    width: 100px;    /*-webkit-backface-visibility: hidden;*/}.container {     margin-left: 500px;     -webkit-transform-style: preserve-3d; }body {    -webkit-perspective: 1200px;}#stageBg {    -webkit-transform: rotateY(0deg);    width: 50px;}
3.js代码
$(document).ready(function() {        for (var i = 0; i < 10; i++) {            $(".container li:not('#stage')").eq(i).css("-webkit-transform",'rotateY('+ ((40)*(i-1)) +'deg) translateZ(200px)');        }        $("#stageBg").css("-webkit-transform",'rotateY(0deg)');    })$(document).on('click',"#stage", function() {        $(".container li").each(function(index, val) {            var rotateY = this.style.webkitTransform;            var regY = /^rotateY\((\d*)deg.*$/;            var newRotate = parseInt(regY.exec(rotateY)[1]) + 40;            if (newRotate > 10800) {                newRotate -= 10800;            }            if ($(val).attr('id') == 'stageBg') {                $(this).css("-webkit-transform",'rotateY('+ newRotate +'deg)');            } else {                $(this).css("-webkit-transform",'rotateY('+ newRotate +'deg) translateZ(200px)');            }        })    });setInterval(function() {        $('#stage').click();    },1500)     //时间循环，每1.5秒转动一次

问题：我把perspective：1200.设在stage中时，图片基本显示在一条水平线上，3D效果不明显，所有我把这个属性设置在body上，不明白为什么在body上效果就会明显很多。
我设置了每次rotateY在到10800+deg时，都会回到减去10800.防止数字过大出现错误。但是会有图片旋转很多圈的情况，希望大牛能够给与修改建议。