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

9 篇文章 0 订阅
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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丸子哥哥

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值