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

jquery css 3d旋转demo

猜你喜欢