登录
当前位置： 首页 > 编程笔记 >

js实现3D旋转效果

倪鸿禧
2023-03-14
本文向大家介绍js实现3D旋转效果，包括了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实现旋转木马效果

    本文向大家介绍js实现旋转木马效果，包括了js实现旋转木马效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

  • jQuery实现炫丽的3d旋转星空效果

    本文向大家介绍jQuery实现炫丽的3d旋转星空效果，包括了jQuery实现炫丽的3d旋转星空效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现炫丽的3d旋转星空效果。分享给大家供大家参考，具体如下： 该特效也是在Jquery插件库中找到的，感觉效果不错，说不定以后项目中要有绚丽的星空背景，拿来即用，收藏了下。 下载解压后的目录结构 index.html页面代码： 运行的

  • Android实现3D翻转动画效果

    本文向大家介绍Android实现3D翻转动画效果，包括了Android实现3D翻转动画效果的使用技巧和注意事项，需要的朋友参考一下 Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。 Animation动画的主要接口，其中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放

  • JS实现六边形3D拖拽翻转效果的方法

    本文向大家介绍JS实现六边形3D拖拽翻转效果的方法，包括了JS实现六边形3D拖拽翻转效果的方法的使用技巧和注意事项，需要的朋友参考一下 效果图 实例代码如下： 以上就是这篇文章的全部内容，怎么样？效果很好吧，感兴趣的朋友们自己运行看看效果，希望这篇文章对大家能有一定的帮助。

  • 两个值和3D旋转效果（Two Values and 3D-Rotate Effect）

    描述 (Description) 该拾取器与拾取器相同; 除了在此选择器中，您可以将其用于3D旋转效果。 例子 (Example) 以下示例演示了在Framework7中使用2 values and 3d-rotate effect - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width =

  • jQuery实现图像旋转动画效果

    本文向大家介绍jQuery实现图像旋转动画效果，包括了jQuery实现图像旋转动画效果的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接给大家贴代码了，具体代码如下所示： 以上所述是小编给大家介绍的jQuery实现图像旋转动画效果，希望对大家有所帮助！

相关阅读

jQuery实现图像旋转动画效果JS+canvas画布实现炫酷的旋转星空效果示例Android酷炫动画效果之3D星体旋转效果PHP实现图片旋转效果实例代码Android使用animator实现fragment的3D翻转效果

相关文章

Matplotlib 3D绘图JOGL 3D浆轮JOGL 3D形状腾讯光子实习面经-3D美术设计腾讯光子实习面经-3D美术设计

相关问答

巴比伦的球体旋转。js如何有效地旋转数组？三js摄像头。旋转y到360度转换javascript - JS页面sticky翻页效果如何实现？如何在libGDX Box2D中实现圆形旋转矩形？

相关工具

旋转菜单手动旋转屏幕可旋转的地图Annotation读取txt并实现翻页效果瀑布效果，不同的实现方式

相关文档

常见 Web 特效实践Cocos Creator 3D 用户手册 v1.2Redis 设计与实现如何实现自己的 jQuery常用算法实现方法
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.