js实现3D旋转效果

2024-11-03 21:08:10

本文实例为大家分享了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实现图片平面旋转的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
JavaScript实现旋转轮播图

最近一直在学习JavaScript,然后看到旋转轮播图的案例,就尝试着用js做了一个简单的轮播图,因为无法显示动态效果,所以就放个截图: 这个效果是这样的:一共有7张图片,它们会自动地向左滑动,然后左右箭头也可以控制轮播图的左滑和右滑,同时,如果鼠标停在图片上,那么轮播图会停止自动滑动,当鼠标移开时,将会继续向左轮播. 首先,我这里封装了两个函数(因为暂且还没有学jQuery,所以用了封装函数的方法来实现),第一个函数是$函数,调用可以获取html中的元素,代码如下: `function $(s
three.js实现围绕某物体旋转

话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/t
js CSS3实现卡牌旋转切换效果

我们经常会在游戏里看到一些几张卡牌左右切换的效果,中间的一张最突出醒目,向左或向右滑动可切换到另一张,今天我们就用CSS3来实现下这种效果. 我们先来看个demo,具体的样式各位可以自己调整: (PC下可点击按钮切换,移动端可左右滑动切换) 从效果上我们可以看到,这5个div可以左右的切换,每次切换时总会有一个在中间显眼的位置进行展示.在切换时,看起来是div进行了移动,进行了DOM的增删操作.但是如果审查下元素,就能看到,DOM元素没有变换位置,它依然在那个位置,我们只是切换了每个元素上的cl
js实现图片旋转 js滚动鼠标中间对图片放大缩小

从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. 这个图片放大,缩小和旋转,我采用canvas画布这个来做的,核心点就在js中去控制鼠标状态及事件. 我先给大家展示一下效果图. 鼠标移到画布范围内就会出现下方的操作栏,每次以90度选择. 1.在引入js的时候一定要注意了,由于在使用画布canvas时,需要等图片加载完成后才可以执行画布里的内容.j
JS实现全景图效果360度旋转

var scrl,direction="right"; var x,xold,xdiff, i=1; function change(start){ if(direction == "right"){ if(div1.scrollTop+190 0){ div1.scrollTop -= 190; } else{ div1.scrollTop = div1.scrollHeight; } } if(start) scrl = setTimeout("cha
特漂亮的JS图片排列旋转效果代码

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp! body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=p
JavaScript canvas实现围绕旋转动画

使用canvas的convas来实现围绕旋转动画,外圈顺时针,里层逆时针代码demo链接地址:代码demo链接地址 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; overflow:
纯JS实现旋转图片3D展示效果

CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type
js实现图片旋转的三种方法

1 使用jQueryRotate.js实现示例代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt

js实现3D旋转效果

相关推荐

随机推荐