CSS学习案例（13）：3D卡图库旋转

	<div class="box">
        <div style="--i:1"><img src="/img/08E724F95B8A3381E7AF0460B8667CB8.jpg" ></div>
        <div style="--i:2"><img src="/img/95ACF74AB0E3067CA55FF4D791A2F883.jpg" ></div>
        <div style="--i:3"><img src="/img/8868F49150A11ECB85B508909E7BFA32.jpg" ></div>
        <div style="--i:4"><img src="/img/4E7587CD158023F4A88CC46341981AB7.jpg" ></div>
        <div style="--i:5"><img src="/img/8DB07BA630BF61B8B277BCE26BEDEE0D.jpg" ></div>
        <div style="--i:6"><img src="/img/055469C3175A4F1DC5694B0DE288D5C9.jpg" ></div>
        <div style="--i:7"><img src="/img/660560737EB744BBFF2063C919B2E134.jpg" ></div>
        <div style="--i:8"><img src="/img/C0E8D5EF9B5FA3C9CC40E292F0AF02CA.jpg" ></div>
        <h1>Rengarhunt</h1>
    </div>

html{
    --background-color: #2c3e50;
}

*{margin: 0;padding: 0;}

body{
    height: 100vh;width: 100vw;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
    transform-style: preserve-3d;
}

.box{
    width: 100px;height: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
    transform-style: preserve-3d;
    transform: rotateX(-20deg);
    animation: moves1 60s linear infinite;
}

@keyframes moves1{
    0%{
        
        transform:translateY(-60px) rotateX(-10deg) rotateY(0deg) ;
    }
    100%{
        transform:translateY(-60px) rotateX(-10deg) rotateY(360deg) ;
    }
}

.box div{
    position: absolute;
    transform-origin: center;
    transform: rotateY(calc(45deg * var(--i))) translateZ(500px) scale(.8);
}

img{
    width: 300px;height: 400px;
    border-radius: 10px;
}
.box h1{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
    font-size: 80px;
    animation: moves2 60s linear infinite;
}
@keyframes moves2{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
.box:hover{
    animation-play-state: paused;
}
.box:hover h1{
    animation-play-state: paused;
}

案例参考：学习：HTML&CSS制作3D旋转图库