3D魔幻旋转相册
特效：发牌动画效果、定时旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background: #000; } .wrap{ width: 150px; height: 150px; /* border: 1px solid green; */ margin: 150px auto; perspective: 2000px; } .wrap>.imgList{ height: 100%; position: relative; transform-style: preserve-3d; } .imgList>img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-shadow: 0 0 8px 0 #eee; } .bottom{ width: 1000px; height: 1000px; background: radial-gradient(rgba(102,0,204,0.5) 30%,rgba(0,0,0,0) 80%); position: absolute; left: 50%; top: 0; margin-left: -500px; transform: rotateX(90deg); margin-top: -300px; border-radius: 50%; } /* 一圈是360/8 = 45 */ /* .imgList>img:nth-child(1){ transform: rotate(0deg) } .imgList>img:nth-child(2){ transform: rotate(45deg) } .imgList>img:nth-child(3){ transform: rotate(90deg) } .imgList>img:nth-child(4){ transform: rotate(135deg) } */ </style> </head> <body> <div class="wrap"> <div class="imgList"> <img src="images/image1.jpg" alt=""> <img src="images/image2.jpg" alt=""> <img src="images/image3.jpg" alt=""> <img src="images/image4.jpg" alt=""> <img src="images/image5.jpg" alt=""> <img src="images/image6.jpg" alt=""> <img src="images/image7.jpg" alt=""> <img src="images/image8.jpg" alt=""> <div class="bottom"></div> </div> </div> </body> </html> <script> // 当页面加载完成之后，才执行下列代码 window.onload=function(){ // i=0; 0.2*7 // i=1; 0.2*6 // i=2; 0.2*5 // i=3; 0.2*4 // i=4; 0.2*3 // i=5; 0.2*2 // i=6; 0.2*1 // i=7; 先出来 0s // len = 8; len-1-i // document.getElementsByClassName("imgList")[0]; var imgList = document.querySelector(".imgList"); var imgs = document.querySelectorAll(".imgList>img"); var len = imgs.length; var itemDeg = 360/len; for (let i = 0; i < len; i++) { // 沿Y轴旋转 imgs[i].style.transform="rotateY("+ itemDeg * i + "deg) translateZ(300px)"; imgs[i].style.transition="1.5s linear "+(len-1-i)*0.2+"s"; } var num = 0; setInterval(function(){ num ++; var val = num * 0.2; imgList.style.transform="rotateX(-10deg) rotateY("+val+"deg)"; },30); } </script>
