首页
所有分类
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 相关文章推荐
如何将网页表格内容导入excel
Feb 18 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
socket.io学习教程之基础介绍（一）
Apr 29 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
javascript操作向表格中动态加载数据
Aug 27 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) Spring(9) Seaborn(1) yolo3(1) Xception(1) Lifecycle(1) PostMapping(1) Inception(2) tensorflow(2) ResNet50(1)
You might like
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
第六节--访问属性和方法
2006/11/16 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
详解nodejs实现本地上传图片并预览功能（express4.0+）
2017/06/28 NodeJs
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python之os操作方法(详解)
2017/06/15 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python能开发游戏吗
2020/06/11 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
初一地理教学反思
2014/01/16 职场文书
安全生产演讲稿
2014/05/09 职场文书
安全宣传标语口号
2014/06/06 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
三方股份合作协议书
2014/10/13 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书