純JavaScript實現 旋轉木馬/3d相冊特效(鼠標拖拽旋轉)
先來看看效果圖
說一下實現的思路
旋轉木馬是通過依靠擁有景深(perspective)屬性的盒子(此處盒子id起為:perspective)產生向網頁內部的延伸感，并讓裝有圖片沿z軸平移后(translateZ(Xpx))的盒子(此處起名為wrap)在擁有景深屬性的盒子(perspective)內憑借transform屬性產生的3d效果沿盒子(wrap)y軸旋轉轉動來實現的。
3d實現過程
首先要知道在js中transform中的xyz軸的含義
首先設置一個div，為其加上perspective的屬性(撐開空間)，方便后邊觀察效果
/* 場景景深 */
#perspective{
perspective: 700px;/*此屬性是實現旋轉木馬的要點，能產生空間上的距離/延伸感。
在此盒子中放置圖片的盒子便可以實現向網頁內部延伸的感覺*/
}2. 其次，設置裝有圖片盒子的容器wrap,使其居中顯示，并加上position:relative的屬性，讓其內的圖片定位。加上transform屬性，在之后會用到。
#wrap{
position: relative;
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid black;
transform-style: preserve-3d; /*實現3d效果的關鍵步驟，與boxshadow配合使用可以忽略層級問題，之后會說到*/
transform: rotateX(0deg) rotateY(0deg) ;//為盒子的3d效果和旋轉效果做準備。
}加入圖片，設置樣式，使用position:absolute；使其重疊。以數組的形式獲取，并根據其數組長度length來計算圖片的旋轉角度。
#wrap img{
position: absolute;
width: 200px;
}
<script>
var oImg = document.getElementsByTagName('img')；
var Deg = 360/oImg.length;
oWrap = document.getElementById('wrap'); /*順便拿一下容器*/
</script>遍歷數組，使其沿y軸旋轉Deg度。此處使用了原型，使用foreach方法遍歷了數組，讓其內每個圖片都執行了function(el,index)。使用index下標區分開了數組內每個圖片需要旋轉的不同度數（第一張0°（Deg * 0） 第二張Deg度 （Deg * 1） 第三張（Deg * 2）度…）
/*oImg表示數組對象，function(el,index)表示數組內每個對象要執行的函數，index為其下標。*/
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)";
})Array.prototype 屬性表示 Array 構造函數的原型，并允許我們向所有Array對象添加新的屬性和方法。
forEach() 方法對數組的每個元素執行一次提供的函數。
此處值得注意的是，xxx.xx.transform = “rotateY(”+Deg*index+“deg)”;
需要加上deg單位，括號要被雙引號包著，也就是說，出來后的結果是transform :rotateY(度數deg);度數表示數字，要避免被轉為字符串。
做完上一步操作后，讓盒子其內圖片沿Z軸平移translateZ(350px)屬性便能初步看到3d效果，但此時會發現容器內圖片數組出現了層級問題（Zindex）導致了理應在后面的圖片能被顯示出來。
這里有一種方法能忽略掉這個影響，避開層級問題：
/*加上沿z擴散*/
<script>
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)"; //沿z軸擴散350px
})
</script>
-------執行完畢后--------加上屬性觀察效果---------
#wrap{
width: 200px;
height: 200px;
position: relative;
margin:150px auto;
transform-style: preserve-3d; /*實現3d效果的關鍵步驟，與boxshadow配合使用可以忽略層級問題*/
}
#wrap img{
position: absolute;
width: 200px;
box-shadow: 0px 0px 1px #000000; /* 用box-shadow配合transform-style: preserve-3d;可以忽略層級問題 */
}這時候為裝有圖片的盒子加上transform:rotateX(-15deg);便能看到較為完整的3d效果了，此時實現盒子繞y軸轉動便可實現旋轉木馬的效果。
實現運動過程
單純使盒子轉動就可以實現旋轉木馬，可以使用setinterval來不斷使其旋轉。
如果想使用鼠標拖動實現旋轉木馬，則需要再加一些代碼，使裝有盒子的容器(wrap)能夠根據鼠標坐標變化繞容器(wrap)自身y軸轉動。
var nowX ,nowY,//當前鼠標坐標
lastX ,lastY ,//上一次鼠標坐標
minusX,minusY ,//距離差
roX = -10,roY = 0;//總旋轉度數
window.onmousedown = function(ev){
var ev = ev;//獲得事件源
//鼠標移動后當前坐標會變為舊坐標，此處先保存，在算鼠標位移距離差的時候會用到。
lastX = ev.clientX;
lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev;//獲得事件源
nowX = ev.clientX;nowY = ev.clientY;//獲得移動時的當前坐標
minusX = nowX - lastX;//坐標差
minusY = nowY - lastY;//坐標差
//累計差值，如果不累計的話轉輪在每次點擊-->移動后都會從第一張開始。
roY += minusX;
roX -= minusY;//累計差值
//轉動容器的x軸和y軸，使其轉動度數(數值，不帶單位)等于鼠標坐標差。
oWrap.style.transform = "rotateX("+roX+"deg)"
+"rotateY("+roY+"deg)";
lastX = nowX;lastY = nowY;//移動末期現坐標變為舊坐標
}
this.onmouseup = function(){
this.onmousemove = null;//取消鼠標移動的影響
// this.onmousedown = null;
}
}
}完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{overflow: hidden;
background: #000000;
}
/* 場景景深 */
#perspective{
perspective: 700px;
}
#wrap{
position: relative;
width: 200px;
height: 200px;
margin: 150px auto;
border: 1px solid black;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(0deg) ;/*景深可以簡寫在此屬性里*/
}
#wrap img{
position: absolute;
width: 200px;
transform: rotateX(0deg) rotateY(0deg);
box-shadow: 0px 0px 1px #000000;
/* 用box-shadow可以忽略層級問題 */
}
</style>
</head>
<body>
<div id="perspective">
<div id="wrap">
<img src="img3/preview1.jpg" >
<img src="img3/preview2.jpg" >
<img src="img3/preview3.jpg" >
<img src="img3/preview4.jpg" >
<img src="img3/preview5.jpg" >
<img src="img3/preview6.jpg" >
<img src="img3/preview7.jpg" >
<img src="img3/preview8.jpg" >
<img src="img3/preview9.jpg" >
<img src="img3/preview10.jpg" >
<img src="img3/preview11.jpg" >
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oImg = document.getElementsByTagName('img'),
oWrap = document.getElementById('wrap');
var Deg = 360/(oImg.length);
Array.prototype.forEach.call(oImg,function(el,index){
el.style.transform = "rotateY("+Deg*index+"deg)translateZ(350px)";
// el.style.zIndex = -index;
el.style.transition = "transform 1s "+ index*0.1 +"s";
});
var nowX ,nowY,//當前鼠標坐標
lastX ,lastY ,//上一次鼠標坐標
minusX,minusY ,//距離差
roX = -10,roY = 0;//總旋轉度數
window.onmousedown = function(ev){
var ev = ev;//獲得事件源
lastX = ev.clientX;lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev;//獲得事件源
nowX = ev.clientX;nowY = ev.clientY;//獲得當前坐標
minusX = nowX - lastX;minusY = nowY - lastY;//坐標差
roY += minusX;//累計差值
roX -= minusY;//累計差值
oWrap.style.transform = "rotateX("+roX+"deg)"
+"rotateY("+roY+"deg)";
lastX = nowX;lastY = nowY;//移動末期現坐標變為舊坐標
}
this.onmouseup = function(){
this.onmousemove = null;//取消鼠標移動的影響
// this.onmousedown = null;
}
}
}
</script>
</body>
</html>以上就是純js實現3d相冊（附源碼）的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
