3D电子相册

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>
猜你喜欢
