影片直播app原始碼，純JS實現旋轉木馬/3d相簿

影片直播app原始碼，純JS實現旋轉木馬/3d相簿

1.首先設定一個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效果和旋轉效果做準備。
 }

3.加入圖片，設定樣式，使用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>

4.遍歷陣列，使其沿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)";
})

 以上就是 影片直播app原始碼，純JS實現旋轉木馬/3d相簿，更多內容歡迎關注之後的文章