js實現3D旋轉效果
更新時間：2020年08月18日 11:35:04 作者：庚中
這篇文章主要為大家詳細介紹了js實現3D旋轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現3D旋轉效果的具體代碼，供大家參考，具體內容如下
實現效果：
實現過程：
步驟一：先寫一個簡單的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屬性指定嵌套元素是在三維空間中呈現。(使用此屬性必須先使用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ū)域。如果省略該參數值，則默認為無遮罩圖像。*/
}
</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.每個需要旋轉的度數
// 定義一個開始的度數
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已經更新,但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的狀態(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屬性指定嵌套元素是在三維空間中呈現。(使用此屬性必須先使用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ū)域。如果省略該參數值，則默認為無遮罩圖像。*/
}
</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.每個需要旋轉的度數
// 定義一個開始的度數
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已經更新,但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的狀態(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>
最后附上源碼地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
7款JavaScript地圖腳本, 大多數都是基于Google地圖,也有使用jQuery實現的。2009-10-10
這篇文章主要為大家詳細介紹了微信小程序彩票號碼生成器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了如何通過JavaScript實現在線導出pdf文件,及office文件如何在線預覽,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
在動態(tài)頁面中，頁面中包含一些動態(tài)產生的控件，在有些情況下需要判斷動態(tài)生成的控件是否存在。2010-08-08
下面小編就為大家?guī)硪黄孓DJavaScript OOP - 類的實現詳解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
hasOwnProperty(propertyName)方法 是用來檢測屬性是否為對象的自有屬性,如果是,返回true,否者false; 參數propertyName指要檢測的屬性名,這篇文章給大家介紹JS中hasOwnProperty方法用法簡介,感興趣的朋友一起看看吧2024-01-01
今天小編就為大家分享一篇解決layui-open關閉自身窗口的問題，具有好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript使用forEach()與jQuery使用each遍歷數組時return false 的區(qū)別
這篇文章主要介紹了JavaScript使用forEach()與jQuery使用each遍歷數組時return false 的區(qū)別,非常不錯，需要的朋友可以參考下2016-08-08
javascript實現二分查找法實現代碼...2007-11-11
這篇文章主要介紹了egg.js的基本使用和調用數據庫的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05