CSS旋转照片墙

直接ctrl+c用

我是在哔哩哔哩看一个作者现场直接盲敲的，我就没有那么厉害了，看了好几遍，才敲完了

html代码

<body>
    <div class="main">
        <div class="images">
            <div style="--img:1"><img src="./img/ (1).jpg" alt=""></div>
            <div style="--img:2"><img src="./img/ (2).jpg" alt=""></div>
            <div style="--img:3"><img src="./img/ (3).jpg" alt=""></div>
            <div style="--img:4"><img src="./img/ (4).jpg" alt=""></div>
            <div style="--img:5"><img src="./img/ (5).jpg" alt=""></div>
            <div style="--img:6"><img src="./img/ (6).jpg" alt=""></div>
            <div style="--img:7"><img src="./img/ (3).jpg" alt=""></div>
            <div style="--img:8"><img src="./img/ (6).jpg" alt=""></div>
            <div style="--img:9"><img src="./img/ (6).jpg" alt=""></div>
        </div>
    </div>
</body>

css样式记得在html页面引入css样式

body{
    margin: 0;
    padding:0;
}
.main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 210px;
    perspective: 400px;
}
.images{
    width: 100%;
    transform-style:preserve-3d ;
    animation: roll 20s infinite linear;
}
.images:hover{
    animation-play-state: paused; 
}
.images div{
    width: 100%;
    position: absolute;
    float: right;
    transform: rotateY(calc(40deg * var(--img) - 40deg)) translateZ(300px);
}
.images div img:hover{
    filter: grayscale(0);
    transform: scale(1.2);
}
.images div img{
    width: 100%;
    filter: grayscale(0.5);
    transition: 0.5s linear;
}

@keyframes roll  {
    0%{
        transform: rotateY(0deg);
    }
    100%{
         transform: rotateY(360deg);
    }
}

猜你喜欢