视频直播app源码，纯JS实现旋转木马/3d相册

视频直播app源码，纯JS实现旋转木马/3d相册

1.首先设置一个div，为其加上perspective的属性(撑开空间)，方便后边观察效果

 

1	/* 场景景深 */<br>#perspective{<br>perspective: 700px;/*此属性是实现旋转木马的要点，能产生空间上的距离/延伸感。在此盒子中放置图片的盒子便可以实现向网页内部延伸的感觉*/<br>}

​

 2.其次，设置装有图片盒子的容器wrap,使其居中显示，并加上position:relative的属性，让其内的图片定位。加上transform属性，在之后会用到。

 

1	<br>#wrap{<br>position: relative;<br>width: 200px;<br>height: 200px;<br>margin: 150px  auto;<br>border:  1px solid black;<br>transform-style: preserve-3d;  /*实现3d效果的关键步骤，与boxshadow配合使用可以忽略层级问题，之后会说到*/<br>transform: rotateX(0deg) rotateY(0deg) ;//为盒子的3d效果和旋转效果做准备。<br> }<br>

 

3.加入图片，设置样式，使用position:absolute；使其重叠。以数组的形式获取，并根据其数组长度length来计算图片的旋转角度。

 

1	#wrap img{<br>position: absolute;<br>width: 200px;<br>}<br><script><br>var oImg = document.getElementsByTagName('img')；<br>var Deg = 360/oImg.length; <br>oWrap = document.getElementById('wrap');  /*顺便拿一下容器*/<br></script><br>

 

4.遍历数组，使其沿y轴旋转Deg度。此处使用了原型，使用foreach方法遍历了数组，让其内每个图片都执行了function(el,index)。使用index下标区分开了数组内每个图片需要旋转的不同度数（第一张0°（Deg * 0） 第二张Deg度 （Deg * 1） 第三张（Deg * 2）度…）

1	/*oImg表示数组对象，function(el,index)表示数组内每个对象要执行的函数，index为其下标。*/<br>Array.prototype.forEach.call(oImg,function(el,index){<br>el.style.transform = "rotateY("+Deg*index+"deg)";<br>})

 以上就是 视频直播app源码，纯JS实现旋转木马/3d相册，更多内容欢迎关注之后的文章