3D旋转电子相册-CSDN博客


<style type="text/css">
		
	   *{margin:0;padding:0}
	   body{
		   background: #000;
	   }
	   .wrapper{
		   width: 150px;
		   height: 150px;
		   margin: 150px auto;
		   perspective: 1200px;
	   }
	   .imgBox{
		   height: 100%;
		   position: relative;
		   transform-style:preserve-3d ;
	   }
	   .imgBox>img{
		   width: 100%;
		   height: 100%;
		   position: absolute;
		   left: 0;
		   top: 0;
		   box-shadow: 0 0 8px 0 #eee;
	   }
	   .bottom{
		   height: 1200px;
		   width: 1200px;
		   background: radial-gradient(rgba(102,0,204,0.5) 30%,rgba(255,255,255,0)60%);
		   position: absolute;
		   left: 50%;
		   top: 150px;
		   margin-left: -600px;
		   transform: rotateX(90deg);
		   margin-top: -600px;
		
	   }
	   
	</style>
</head>
<body>
	<div class="wrapper">
		<div class="imgBox">
			<img src="images/1.jpg" alt="">
			<img src="images/2.jpg" alt="">
			<img src="images/3.jpg" alt="">
			<img src="images/4.jpg" alt="">
			<img src="images/5.jpg" alt="">
			<img src="images/6.jpg" alt="">
			<img src="images/7.jpg" alt="">
			<img src="images/8.jpg" alt="">
			<div class="bottom"></div>
		</div>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			var imgList = document.querySelectorAll(".imgBox>img");
		
			var len = imgList.length;
			var itemDeg = 360/len;
			for(var i = 0;i<len;i++){
				imgList[i].style.transform = imgLists[i].style.transform="rotateY("+itemDeg*i+"deg) translateZ(300px)";
                                imgLists[i].style.transition="1s "+(len-1-i)*0.2+"s";
			}
			
			var num = 0;var imgBox=document.querySelector(".imgBox");
			setInterval(function(){
				num++;
				var val = num*0.2
				imgBox.style.transform= " rotateX(-10deg) rotateY("+val+"deg)"
			},30)
		}
	</script>
	```复制代码