js實現3D旋轉效果
阿新 • • 發佈:2020-08-19
本文例項為大家分享了js實現3D旋轉效果的具體程式碼,供大家參考,具體內容如下
實現效果:
實現過程:
步驟一:先寫一個簡單的html結構,建立一個box盒子,裡面放對應的圖片(也可以用js建立圖片,這裡為了好理解,我們直接用html建立).
<body><div class="box"> <img src="./img/1.jpg" alt="js實現3D旋轉效果"> <img src="./img/2.jpg" alt="js實現3D旋轉效果"> <img src="./img/3.jpg" alt="js實現3D旋轉效果"> <img src="./img/4.jpg" alt="js實現3D旋轉效果"> <img src="./img/5.jpg" alt="js實現3D旋轉效果"> <img src="./img/6.jpg" alt="js實現3D旋轉效果"> <img src="./img/7.jpg" alt="js實現3D旋轉效果"> <img src="./img/8.jpg" alt="js實現3D旋轉效果"> <img src="./img/9.jpg" alt="js實現3D旋轉效果"> <img src="./img/10.jpg" alt="js實現3D旋轉效果"> <img src="./img/11.jpg" alt="js實現3D旋轉效果"> <img src="./img/12.jpg" alt="js實現3D旋轉效果"> </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) 40%,.5) 100%);*/ /*-webkit-box-reflect:below 8px -webkit-linear-gradient(top,0)40%,.5)100%);*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,.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,.6)); /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,.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",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; //兩點之間的差值:第一次走的時候兩值相等,所以兩個差值就是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; //設定一個定時器,30) } } } </script> </body> </html>
最後附上原始碼地址
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。