jquery css 3d rotation demo

Reference blog: http://blog.csdn.net/lmj623565791/article/details/32964301

The demo is tested in the chrome browser. You can change the compatibility of the specific properties in each browser.

css property: -webkit-transform-style: preserve-3d ; render the element in 3D space

	-webkit-perspective: 1200 px ; (Google) view position, relative to element. (firefox-moz-perspective: 800px ; )

	-webkit-transition: -webkit-transform 0.8 s ; (transition: transform 0.8 s ;) state transition time

	-webkit-transform: rotateY ( 180 deg ); state, rotate 180 degrees relative to the Y axis

	-webkit-backface-visibility: hidden; Is the image flip 180 yincang

Dynamic pictures don't work. . . . . .

Design idea: 1.10 pictures are stacked together in the form of position:absolute;. The first center image is set to tranform:rotateZ(0deg) and does not move. , other pictures set tranform:rotateZ(200deg) to move 200 outwards relative to the Z axis

deg. form a circle. Use js to realize the rotation of 9 pictures at different angles relative to the Y axis. in $(document).ready() in the code. So far the basic display has been completed.

	2. Click on the stage container to trigger the click event. All 10 pictures are rotated by 40 degrees on the Y axis, and the rotation time is set in transition:transform 0.8s to form an animation effect. While writing an event trigger, every 1.5 seconds

	Triggers a click event on the stage container. A continuous rotation animation will be formed.

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 code

$(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.防止数字过大出现错误。但是会有图片旋转很多圈的情况，希望大牛能够给与修改建议。