3D electronic album

3D Magic rotation Album
Effects: licensing animation, regular rotation effect
<!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 the src = "Images / image8.jpg" Alt = "" > 
            < div class = "bottom" > </ div > 
        </ div > 
    </ div > 
</ body > 
</ HTML > 
< Script > 
    // when the page after loading is completed, the following code is executed before 
    the 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>
Guess you like
