首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现逼真的图片3D旋转效果详解

Posted in Javascript onFebruary 16, 2019

本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下：

实现效果:

原生JS实现逼真的图片3D旋转效果详解

实现过程:

步骤一:先写一个简单的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>

希望本文所述对大家JavaScript程序设计有所帮助。

原生JS实现逼真的图片3D旋转效果详解

- Author -

庚中

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
没有document.getElementByName方法
Aug 19 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
详解Element 指令clickoutside源码分析
Feb 15 #Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 #Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
东方异文石(1) 绿林侠盗(1) LOL(1) 铁拳(1) 遗弃(1) 吸血鬼(1) 战锤40K(1) 小缇娜的奇幻之地(1) 大话西游(1) 模拟人生(1)
You might like
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
JS的反射问题
2010/04/07 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
瀑布流的实现方式（原生js+jquery+css3）
2020/06/28 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
详解python中__name__的意义以及作用
2019/08/07 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
viagogo波兰票务平台：演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
市场总经理岗位职责
2014/04/11 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript