原生js实现3D旋转效果

其他 2018-11-18 03:10:56 阅读次数: 0

实现效果:在这里插入图片描述

实现过程:
步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).

<body><div class="box">
    <img src="./img/1.jpg" alt="">
    <img src="./img/2.jpg" alt="">
    <img src="./img/3.jpg" alt="">
    <img src="./img/4.jpg" alt="">
    <img src="./img/5.jpg" alt="">
    <img src="./img/6.jpg" alt="">
    <img src="./img/7.jpg" alt="">
    <img src="./img/8.jpg" alt="">
    <img src="./img/9.jpg" alt="">
    <img src="./img/10.jpg" alt="">
    <img src="./img/11.jpg" alt="">
    <img src="./img/12.jpg" alt="">
</div>

步骤二:给盒子和图片,设置对应的样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
            /*overflow: hidden;*/
        }
        #box{
            width:133px;
            height: 200px;
            margin: 200px auto;
            position:relative;
            border: 1px solid #fff;
            transform-style:  preserve-3d;
            /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
            /*perspective:800px;*/
            /*3.设置透视距离*/
            transform:perspective(800px) rotateX(-15deg) rotateY(0deg)  ;                                                                                                                                                                                                                                                                                                                                                                                                                                    deg);


        }
        #box img{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-shadow: 0px 0px 5px #fff;
            /*4.设置图片阴影*/
            /*-webkit-box-reflect: below 15px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);*/
            /*-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
            -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
            /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
        }

    </style>

第三步:js


    <script>
    //     //js动态添加11个img标签
    //    //创建11个img标签的办法
    //     var box=document.getElementById('box');
    //     for(var i=1;i<=11;i++){//有多少张图就循环多少次
    //    var imgs= document.createElement('img');
    //    imgs.setAttribute("src", "img/"+i+".jpg");
    //    box.appendChild(imgs);} 
               //当页面加载完毕后再执行代码
               window.onload=function (  ) {
                   //1.获取元素
                   var oWrap=document.getElementById('box');
                   var oImg=oWrap.children;
                   // var oImgLen=oImg.length;
                   var deg=360/oImg.length;//3.每个需要旋转的度数
                   // 定义一个开始的度数
                   var roX=-10;
                   var roY=0;
                   var x,y,x_,y_,xN,yN,time=null;
                  //2.遍历所有的img标签
                    for(var i=0;i<oImg.length;i++){
                    // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
                        oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
                        oImg[i].style.transition ='all 1s '+ (oImg.length-i-1)*0.1 +'s';
                        //transition:设置过渡
                        oImg[i].ondragstart=function (  ) {
                        return false;
                    }
                    }
                    //3.事件处理
                   document.onmousedown=function ( e ) {
                       clearInterval(time);
                       e=e||window.event;
                       x_=e.clientX;
                       y_=e.clientY;
                      // console.log ( "鼠标按下了" )
                       this.onmousemove=function ( e ) {
                        e=e||window.event;
                        //获取滚动的X和Y轴
                           //client:鼠标触发点相对于页面可视区域左上角距离
                         x=e.clientX;
                         y=e.clientY;
                           //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
                           xN=x-x_;
                            yN=y-y_;
                            //差值拼接到旋转的Y里面去
                           roY+=xN*0.2;//水平拖影响Y轴;
                           roX-=yN*0.2;
                           oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                           // var oDiv =document.createElement('div');
                           // this.body.appendChild(oDiv);
                           // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";
                           x_=e.clientX;
                           y_=e.clientY;
                       }
                       this.onmouseup=function (  ) {
                         //  console.log ( "鼠标抬起了" )
                           this.onmousemove= null;
                           //设置一个定时器,实现后面惯性效果8
                          time=setInterval(function (  ) {

                    //无限乘以零点95它会接近0的状态
                        xN*=0.95;
                        yN*=0.95;
                        //当它小到0.1时停止计时器
                        if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
                            clearInterval(time);
                        }
                    //差值拼接到旋转的Y里面去
                    roY+=xN*0.2;//水平拖影响Y轴;
                    roX-=yN*0.2;
                    oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';

                },30)
                       }
                   }
               }


    </script>

附件:完整版代码

<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #000;
        }
        #box{
            width:133px;
            height: 200px;
            margin: 100px auto;
            position:relative;
            /* border: 1px solid #fff; 测试用到*/
            transform-style:  preserve-3d;
            /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
            /*perspective:800px;*/
            /*3.设置透视距离*/
            transform:perspective(800px) rotateX(-15deg) rotateY(0deg)  ;                                                                                                     }
        #box img{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-shadow: 0px 0px 5px #fff;
            /*4.设置图片阴影*/
            -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
            /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
            /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
        }

    </style>
</head>
<body>
<div id="box">
    <img src="./img/1.jpg" >
    <img src="./img/2.jpg" >
    <img src="./img/3.jpg" >
    <img src="./img/4.jpg" >
    <img src="./img/5.jpg" >
    <img src="./img/6.jpg" >
    <img src="./img/7.jpg" >
    <img src="./img/8.jpg" >
    <img src="./img/9.jpg" >
    <img src="./img/10.jpg" >
    <img src="./img/11.jpg" >
    <img src="./img/12.jpg" >
</div>

    <script>
    //     //js动态添加11个img标签
    //    //创建11个img标签的办法
    //     var box=document.getElementById('box');
    //     for(var i=1;i<=11;i++){//有多少张图就循环多少次
    //    var imgs= document.createElement('img');
    //    imgs.setAttribute("src", "img/"+i+".jpg");
    //    box.appendChild(imgs);} 
               //当页面加载完毕后再执行代码
               window.onload=function (  ) {
                   //1.获取元素
                   var oWrap=document.getElementById('box');
                   var oImg=oWrap.children;
                   // var oImgLen=oImg.length;
                   var deg=360/oImg.length;//3.每个需要旋转的度数
                   // 定义一个开始的度数
                   var roX=-10;
                   var roY=0;
                   var x,y,x_,y_,xN,yN,time=null;
                  //2.遍历所有的img标签
                    for(var i=0;i<oImg.length;i++){
                    // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
                        oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
                        oImg[i].style.transition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
                        //transition:设置过渡
                        oImg[i].ondragstart=function (  ) {
                        return false;
                    }
                    }
                    //3.事件处理
                   document.onmousedown=function ( e ) {
                       clearInterval(time);
                       e=e||window.event;
                       x_=e.clientX;
                       y_=e.clientY;
                      // console.log ( "鼠标按下了" )
                       this.onmousemove=function ( e ) {
                        e=e||window.event;
                        //获取滚动的X和Y轴
                           //client:鼠标触发点相对于页面可视区域左上角距离
                         x=e.clientX;
                         y=e.clientY;
                           //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
                           xN=x-x_;
                            yN=y-y_;
                            //差值拼接到旋转的Y里面去
                           roY+=xN*0.2;//水平拖影响Y轴;
                           roX-=yN*0.2;
                           oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                           // var oDiv =document.createElement('div');
                           // this.body.appendChild(oDiv);
                           // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";这三行是测试用的
                           x_=e.clientX;
                           y_=e.clientY;
                       }
                       this.onmouseup=function (  ) {
                         //  console.log ( "鼠标抬起了" )
                           this.onmousemove= null;
                           //设置一个定时器,实现后面惯性效果8
                          time=setInterval(function (  ) {

                    //无限乘以零点95它会接近0的状态
                        xN*=0.95;
                        yN*=0.95;
                        //当它小到0.1时停止计时器
                        if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
                            clearInterval(time);
                        }
                    //差值拼接到旋转的Y里面去
                    roY+=xN*0.2;//水平拖影响Y轴;
                    roX-=yN*0.2;
                    oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';

                },30)
                       }
                   }
               }


    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/xiaodi520520/article/details/83822177
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022