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

js实现3D旋转效果

Posted in Javascript onAugust 18, 2020

本文实例为大家分享了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>

最后附上源码地址  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现3D旋转效果

- Author -

庚中

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

Javascript 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 #Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 #Javascript
javascript实现移动端上传图片功能
Aug 18 #Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
小程序实现上传视频功能
Aug 18 #Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
vue实现移动端input上传视频、音频
Aug 18 #Javascript
Express(1) 字段分割(1) 分布式追踪(1) delete in(1) GPU(1) 控制流(1) group by(1) 表结构(1) REGEXP(1) 查询效率(1)
You might like
我用php+mysql写的留言本
2006/10/09 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
为何说PHP引用是个坑，要慎用
2018/04/02 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
innerHTML，outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
jQuery知识点整理
2015/01/30 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
深入解析Python中的上下文管理器
2016/06/28 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Python实现多线程的两种方式分析
2018/08/29 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
StubHub墨西哥：购买和出售您的门票
2016/09/17 全球购物
TALLY WEiJL法国网上商店：服装、时装及配饰
2019/08/31 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
运动会通讯稿200字
2014/02/16 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书