小白jQ制作3D动画---螺旋状,相机等3种效果

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin:0px;
            padding: 0px;
        }
        .box
        {
            position: relative;
            width: 1200px;
            height: 800px;
            margin: 50px;
            perspective: 1000px;
        }
        img
        {
            position: absolute;
            left: 600px;
            top: 200px;
        }
        .box2
        {
            transform-style: preserve-3D;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2"></div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        for(var i = 0; i < 98; i++)
        {
        	$("<img src='images/d/"+i+".jpg'>").appendTo(".box2");
        }

        //粑粑形状
//        $("img").each(function (i) {
//	        $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + i * 4 + "px) translateY(" + (i * 6 - 300) + "px)"});
//        });

        //相机形状
//        $("img").each(function (i) {
//	        $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + (i * 5) + "px) "});
//        });

        //螺旋形状
        $("img").each(function (i) {
	        $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + 300 + "px) translateY(" + i * 6 + "px)"});
        });


        //定时器
        var idx = 0;

        setInterval(function () {
	        idx++;

	        $(".box2").css({"transform" : "rotateY("+idx+"deg)"});
        },20);

    </script>
</body>
</html>
小白jQ制作3D动画---螺旋状,相机等3种效果

效果图：

有什么问题欢迎留言！~~~~

猜你喜欢
