首页
所有分类
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中的String对象常用方法
Feb 25 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
jquery插件格式实例分析
Jun 16 Javascript
深入分析javascript中console命令
Aug 14 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
Android Studio(4) 三角函数(1) exec(1) Dijkstra(1) MyBatis(5) 迪杰斯特拉(1) seata(1) cv2(1) nacos(1) 优先队列(1)
You might like
多文件上传的例子
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
js给onclick事件赋值，动态传参数实例解说
2013/03/28 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
从零学python系列之数据处理编程实例（一）
2014/05/22 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
性能服装：HYLETE
2018/08/14 全球购物
Rossignol金鸡美国官网：始于1907年法国百年雪具品牌
2019/03/06 全球购物
Nike墨西哥官网：Nike MX
2020/08/30 全球购物
2015年元旦演讲稿
2014/09/12 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
教师节横幅标语
2014/10/08 职场文书