首页
所有分类
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 IE中的DOM ready应用技巧
Jul 23 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js读取注册表的键值示例
Sep 25 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
微信小程序实现留言板（Storage）
Nov 02 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
iPhone(1) 陨石(1) DNA(2) iOS(1) RNA(2) 嘧啶碱基(2) iOS15(1) 大脑(1) iOS16(1) 富碳陨石(1)
You might like
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php的dl函数用法实例
2014/11/06 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
YII框架http缓存操作示例
2019/04/29 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
详解python进行mp3格式判断
2016/12/23 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
卡骆驰德国官方网站：Crocs德国
2019/03/29 全球购物
Miller Harris官网：英国小众香水品牌
2020/09/24 全球购物
三维科技面试题
2013/07/27 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
同事打架检讨书
2015/05/06 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL