原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果詳解
更新時(shí)間：2019年02月16日 12:14:41 作者：庚中
這篇文章主要介紹了原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)圖片3D旋轉(zhuǎn)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果。分享給大家供大家參考，具體如下：
實(shí)現(xiàn)效果:
實(shí)現(xiàn)過程:
步驟一:先寫一個(gè)簡(jiǎn)單的html結(jié)構(gòu),創(chuàng)建一個(gè)box盒子,里面放對(duì)應(yīng)的圖片(也可以用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>
步驟二:給盒子和圖片,設(shè)置對(duì)應(yīng)的樣式
<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.設(shè)置透視距離*/
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.設(shè)置圖片陰影*/
/*-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.設(shè)置圖片倒影:直接記住吧(3個(gè)值。1. direction 定義方向，取值包括 above 、 below 、 left 、 right。);2. offset定義反射偏移的距離;3.mask-box-image定義遮罩圖像，該圖像將覆蓋投影區(qū)域。如果省略該參數(shù)值，則默認(rèn)為無遮罩圖像。*/
}
</style>
第三步:js
<script>
// //js動(dòng)態(tài)添加11個(gè)img標(biāo)簽
// //創(chuàng)建11個(gè)img標(biāo)簽的辦法
// var box=document.getElementById('box');
// for(var i=1;i<=11;i++){//有多少?gòu)垐D就循環(huán)多少次
// var imgs= document.createElement('img');
// imgs.setAttribute("src", "img/"+i+".jpg");
// box.appendChild(imgs);}
//當(dāng)頁(yè)面加載完畢后再執(zhí)行代碼
window.onload=function ( ) {
//1.獲取元素
var oWrap=document.getElementById('box');
var oImg=oWrap.children;
// var oImgLen=oImg.length;
var deg=360/oImg.length;//3.每個(gè)需要旋轉(zhuǎn)的度數(shù)
// 定義一個(gè)開始的度數(shù)
var roX=-10;
var roY=0;
var x,y,x_,y_,xN,yN,time=null;
//2.遍歷所有的img標(biāo)簽
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:設(shè)置過渡
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 ( "鼠標(biāo)按下了" )
this.onmousemove=function ( e ) {
e=e||window.event;
//獲取滾動(dòng)的X和Y軸
//client:鼠標(biāo)觸發(fā)點(diǎn)相對(duì)于頁(yè)面可視區(qū)域左上角距離
x=e.clientX;
y=e.clientY;
//兩點(diǎn)之間的差值:第一次走的時(shí)候兩值相等,第二次走的時(shí)候x已經(jīng)更新,但x_沒更新,所以兩個(gè)差值就是xN;
xN=x-x_;
yN=y-y_;
//差值拼接到旋轉(zhuǎn)的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 ( "鼠標(biāo)抬起了" )
this.onmousemove= null;
//設(shè)置一個(gè)定時(shí)器,實(shí)現(xiàn)后面慣性效果8
time=setInterval(function ( ) {
//無限乘以零點(diǎn)95它會(huì)接近0的狀態(tài)
xN*=0.95;
yN*=0.95;
//當(dāng)它小到0.1時(shí)停止計(jì)時(shí)器
if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回絕對(duì)值
clearInterval(time);
}
//差值拼接到旋轉(zhuǎn)的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; 測(cè)試用到*/
transform-style: preserve-3d;
/*2.transform–style屬性指定嵌套元素是在三維空間中呈現(xiàn)。(使用此屬性必須先使用transform 屬性)*/
/*perspective:800px;*/
/*3.設(shè)置透視距離*/
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.設(shè)置圖片陰影*/
-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.設(shè)置圖片倒影:直接記住吧(3個(gè)值。1. direction 定義方向，取值包括 above 、 below 、 left 、 right。);2. offset定義反射偏移的距離;3.mask-box-image定義遮罩圖像，該圖像將覆蓋投影區(qū)域。如果省略該參數(shù)值，則默認(rèn)為無遮罩圖像。*/
}
</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動(dòng)態(tài)添加11個(gè)img標(biāo)簽
// //創(chuàng)建11個(gè)img標(biāo)簽的辦法
// var box=document.getElementById('box');
// for(var i=1;i<=11;i++){//有多少?gòu)垐D就循環(huán)多少次
// var imgs= document.createElement('img');
// imgs.setAttribute("src", "img/"+i+".jpg");
// box.appendChild(imgs);}
//當(dāng)頁(yè)面加載完畢后再執(zhí)行代碼
window.onload=function ( ) {
//1.獲取元素
var oWrap=document.getElementById('box');
var oImg=oWrap.children;
// var oImgLen=oImg.length;
var deg=360/oImg.length;//3.每個(gè)需要旋轉(zhuǎn)的度數(shù)
// 定義一個(gè)開始的度數(shù)
var roX=-10;
var roY=0;
var x,y,x_,y_,xN,yN,time=null;
//2.遍歷所有的img標(biāo)簽
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:設(shè)置過渡
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 ( "鼠標(biāo)按下了" )
this.onmousemove=function ( e ) {
e=e||window.event;
//獲取滾動(dòng)的X和Y軸
//client:鼠標(biāo)觸發(fā)點(diǎn)相對(duì)于頁(yè)面可視區(qū)域左上角距離
x=e.clientX;
y=e.clientY;
//兩點(diǎn)之間的差值:第一次走的時(shí)候兩值相等,第二次走的時(shí)候x已經(jīng)更新,但x_沒更新,所以兩個(gè)差值就是xN;
xN=x-x_;
yN=y-y_;
//差值拼接到旋轉(zhuǎn)的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";這三行是測(cè)試用的
x_=e.clientX;
y_=e.clientY;
}
this.onmouseup=function ( ) {
// console.log ( "鼠標(biāo)抬起了" )
this.onmousemove= null;
//設(shè)置一個(gè)定時(shí)器,實(shí)現(xiàn)后面慣性效果8
time=setInterval(function ( ) {
//無限乘以零點(diǎn)95它會(huì)接近0的狀態(tài)
xN*=0.95;
yN*=0.95;
//當(dāng)它小到0.1時(shí)停止計(jì)時(shí)器
if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回絕對(duì)值
clearInterval(time);
}
//差值拼接到旋轉(zhuǎn)的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>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
- JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
- js實(shí)現(xiàn)3D旋轉(zhuǎn)效果
- js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效
- JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼
- js實(shí)現(xiàn)3D旋轉(zhuǎn)相冊(cè)
- JavaScript制作3D旋轉(zhuǎn)相冊(cè)
- CSS與JS實(shí)戰(zhàn)之利用H5實(shí)現(xiàn)3D旋轉(zhuǎn)照片墻
相關(guān)文章
獲取JavaScript用戶自定義類的類名稱的代碼...2007-03-03
Typescript tipe freshness 更嚴(yán)格對(duì)象字面量檢查
這篇文章主要為大家介紹了Typescript tipe freshness 更嚴(yán)格對(duì)象字面量檢查，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在微信小程序中,你可以創(chuàng)建自定義組件,這些組件可以在不同的頁(yè)面和項(xiàng)目中重復(fù)使用,非常適合復(fù)用代碼,這篇文章主要介紹了微信小程序代碼復(fù)用技巧的相關(guān)資料,需要的朋友可以參考下2026-03-03
JavaScript中Promise的執(zhí)行順序詳解
Promise 是 JS 中進(jìn)行異步編程的新的解決方案(舊的是純回調(diào)形式) ,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise執(zhí)行順序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
Ubuntu 11.10 安裝Node.js的方法，需要的朋友可以參考下。2011-11-11
最近在寫位操作的時(shí)候突然想到了這個(gè)問題，突然想總結(jié)一下，交換變量值的問題可能使我們學(xué)習(xí)編程語言接觸到的比較早的邏輯問題，小伙伴或多或少會(huì)兩種解決的方法，本文提供了七種解決的方法，下面跟著小編來一起看看吧。2016-12-12
JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁(yè)效果
這篇文章主要介紹了JS代碼實(shí)現(xiàn)table數(shù)據(jù)分頁(yè)效果的相關(guān)資料,非常不錯(cuò)，代碼簡(jiǎn)答易懂，非常實(shí)用，需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片預(yù)覽裁剪插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
javascript 身份證號(hào)碼驗(yàn)證函數(shù)(可辨真?zhèn)危С?5或18位身份證號(hào))測(cè)試誤差為0
javascript 身份證號(hào)碼驗(yàn)證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號(hào))測(cè)試誤差為0 ，非常不錯(cuò)，其實(shí)主要是特別熟悉身份證的算法。2010-05-05