js實現(xiàn)3D旋轉效果

更新時間：2020年08月18日 11:35:04 作者：庚中

這篇文章主要為大家詳細介紹了js實現(xiàn)3D旋轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)3D旋轉效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)效果：

實現(xiàn)過程：

步驟一：先寫一個簡單的html結構,創(chuàng)建一個box盒子,里面放對應的圖片(也可以用js創(chuàng)建圖片,這里為了好理解,我們直接用html創(chuàng)建).

<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屬性指定嵌套元素是在三維空間中呈現(xiàn)。(使用此屬性必須先使用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定義遮罩圖像，該圖像將覆蓋投影區(qū)域。如果省略該參數(shù)值，則默認為無遮罩圖像。*/
 }

</style>

第三步： js

<script>
 // //js動態(tài)添加11個img標簽
 // //創(chuàng)建11個img標簽的辦法
 // var box=document.getElementById('box');
 // for(var i=1;i<=11;i++){//有多少張圖就循環(huán)多少次
 // var imgs= document.createElement('img');
 // imgs.setAttribute("src", "img/"+i+".jpg");
 // box.appendChild(imgs);} 
  //當頁面加載完畢后再執(zhí)行代碼
  window.onload=function ( ) {
   //1.獲取元素
   var oWrap=document.getElementById('box');
   var oImg=oWrap.children;
   // var oImgLen=oImg.length;
   var deg=360/oImg.length;//3.每個需要旋轉的度數(shù)
   // 定義一個開始的度數(shù)
   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:鼠標觸發(fā)點相對于頁面可視區(qū)域左上角距離
    x=e.clientX;
    y=e.clientY;
    //兩點之間的差值:第一次走的時候兩值相等,第二次走的時候x已經(jīng)更新,但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;
    //設置一個定時器,實現(xiàn)后面慣性效果8
    time=setInterval(function ( ) {

   //無限乘以零點95它會接近0的狀態(tài)
   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屬性指定嵌套元素是在三維空間中呈現(xiàn)。(使用此屬性必須先使用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定義遮罩圖像，該圖像將覆蓋投影區(qū)域。如果省略該參數(shù)值，則默認為無遮罩圖像。*/
 }

 </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動態(tài)添加11個img標簽
 // //創(chuàng)建11個img標簽的辦法
 // var box=document.getElementById('box');
 // for(var i=1;i<=11;i++){//有多少張圖就循環(huán)多少次
 // var imgs= document.createElement('img');
 // imgs.setAttribute("src", "img/"+i+".jpg");
 // box.appendChild(imgs);} 
  //當頁面加載完畢后再執(zhí)行代碼
  window.onload=function ( ) {
   //1.獲取元素
   var oWrap=document.getElementById('box');
   var oImg=oWrap.children;
   // var oImgLen=oImg.length;
   var deg=360/oImg.length;//3.每個需要旋轉的度數(shù)
   // 定義一個開始的度數(shù)
   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:鼠標觸發(fā)點相對于頁面可視區(qū)域左上角距離
    x=e.clientX;
    y=e.clientY;
    //兩點之間的差值:第一次走的時候兩值相等,第二次走的時候x已經(jīng)更新,但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;
    //設置一個定時器,實現(xiàn)后面慣性效果8
    time=setInterval(function ( ) {

   //無限乘以零點95它會接近0的狀態(tài)
   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,超強推薦share.js
腳本吧 - 幻宇工作室用到js,超強推薦share.js...
2006-12-12
Echarts圖表如何利用formatter自定義tooltip的內容和樣式
這篇文章主要給大家介紹了關于Echarts圖表如何利用formatter自定義tooltip的內容和樣式的相關資料,echarts的圖表配置非常的靈活自由,但是不熟悉的時候容易不知道怎么配置,需要的朋友可以參考下
2023-06-06
ECharts繪制立體柱狀圖(圓柱體)詳細示例
echarts實現(xiàn)平面的柱狀圖很順利,但是用戶為了美觀立體感,用到圓柱體圖,下面這篇文章主要給大家介紹了關于ECharts繪制立體柱狀圖(圓柱體)的相關資料,需要的朋友可以參考下
2023-11-11
JavaScript實現(xiàn)涂鴉筆功能
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)涂鴉筆功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript圖片旋轉效果實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉效果實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
Javascript的并行運算實現(xiàn)代碼
隨著多核cpu的普級,并發(fā)/并行多線程運算在主流的編程語言越來越流行,而在目前Javascript實現(xiàn)中還看不到在語言方面支持多線程,現(xiàn)在Javascript如此流行,真希望今后會在語言的層面有很大的變化.
2010-11-11
JS一級數(shù)組和數(shù)組對象合并去重方法實例
這篇文章主要為大家介紹了JS一級數(shù)組和數(shù)組對象合并去重方法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
熱點新聞滾動特效的js代碼
我們在很多大型門戶網(wǎng)站都會有看到有些一熱點新聞都會一直向上滾動，下面我就來給大家推薦一款Javascript中熱點新聞滾動特效代碼，有需要了解的朋友可以參考一下
2013-08-08
JavaScript常用基礎知識強化學習
這篇文章主要介紹了JavaScript常用基礎知識強化學習，需要的朋友可以參考下
2015-12-12
ES6新增的數(shù)組知識實例小結
這篇文章主要介紹了ES6新增的數(shù)組知識,結合實例形式分析了ES6的數(shù)組新增知識點、使用技巧與相關注意事項,需要的朋友可以參考下
2020-05-05