首页
所有分类
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 相关文章推荐
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
全面理解闭包机制
Jul 11 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
JS实现点击掉落特效
Jan 29 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
SnakeGame(1) 分词器(1) 计算机视觉(2) mediapipe(1) 无限迭代(1) 贪吃蛇(2) for(1) while(1) okenizer(1) cvzone(1)
You might like
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
2016年最热门的15 款代码语法高亮工具，美化你的代码
2016/01/06 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python实现简单ftp客户端的方法
2015/06/28 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
python中的编码知识整理汇总
2016/01/26 Python
批处理与python代码混合编程的方法
2016/05/19 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Django进阶之CSRF的解决
2018/08/01 Python
Django中URL的参数传递的实现
2019/08/04 Python
django 简单实现登录验证给你
2019/11/06 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python实现猜拳游戏项目
2020/11/30 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
挪威太阳镜和眼镜网上商城：SmartBuyGlasses挪威
2016/08/20 全球购物
高中数学教学反思
2014/01/30 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
师德师风建设方案
2014/05/08 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android