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

最新推荐文章于 2021-06-30 14:16:12 发布

丸子哥哥

最新推荐文章于 2021-06-30 14:16:12 发布

阅读量726

点赞数 1

分类专栏： jQuery入门项目锻炼 CSS HTML入门文章标签： jQ制作3D动画 jQuery

本文链接：https://blog.csdn.net/qq_36818386/article/details/82464251

版权

项目锻炼同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

HTML入门

6 篇文章 0 订阅

订阅专栏

效果图：

<!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>

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

丸子哥哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
小白jQ制作3D动画---螺旋状,相机等3种效果

效果图： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * {
复制链接

扫一扫