CSS3滑动轮播动画

<main>
    <section>
        <div class="carousel-motion">
            <span class="motion-item"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt="500x500-1"></span>
            <span class="motion-item"><img src="https://www.jq22.com/img/cs/500x500-2.png" alt="500x500-2"></span>
            <span class="motion-item"><img src="https://www.jq22.com/img/cs/500x500-3.png" alt="500x500-3"></span>
        </div>
    </section>
</main>

* {
   
    margin:0;
    padding:0;
}
img {
   
    user-select:none;
    -webkit-user-drag:none;
}
img[alt]:after {
   
    content:attr(alt);
    display:block;
    position:absolute;
    inset:0;
    display:inline-grid;
    justify-content:center;
    align-items:center;
    background:inherit;
    border-radius:inherit;
    font-size:1.4em;
    color:#c3c2d4;
    background-color:#454258;
    z-index:2;
}
html,body {
   
    height:100%;
    background-color:#1c1c28;
}
:root {
   
    --perspective:1000px;
}
.carousel-motion {
   
    --size:clamp(8em,40vw,10em);
    --distance:calc(.85 * var(--size));
    --parallax-factor:1.1;
    --rotation:0deg;
    --perspective:100rem;
    margin:10rem auto;
    width:var(--size);
    height:var(--size);
    perspective:var(--perspective);
    transform-style:preserve-3d;
    transform:translateZ(calc(var(--perspective) * (1 - var(--parallax-factor)))) scale(var(--parallax-factor));
    z-index:calc(100 * var(--parallax-factor));
    transition:.5s cubic-bezier(.3,3,.66,1);
    cursor:pointer;
}
.motion-item {
   
    position:absolute;
    width:var(--size);
    height:var(--size);
    filter:brightness(var(--brightness,100%));
    transition:1s cubic-bezier(.5,1.33,.3,1);
    transform:rotateX(-10deg) translateZ(calc(-1 * var(--distance))) rotateY(calc(var(--rotation) + var(--angle))) translateZ(var(--distance)) rotateY(calc(-1 * (var(--rotation) + var(--angle)))) rotateX(10deg);
    border-radius:50%;
    overflow:hidden;
}
.motion-item img {
   
    width:100%;
    height:100%;
}
.carousel-motion:hover>:nth-of-type(3n+1),.carousel-motion:not(:hover)>:nth-of-type(3n+2),.carousel-motion:not(:hover)>:nth-of-type(3n+3) {
   
    --brightness:75%
}
.carousel-motion:hover {
   
    --rotation:180deg;
}
.carousel-motion>:nth-child(3n + 1) {
   
    --angle:0deg;
    transition-delay:.05s;
    transition-duration:1.06s;
}
.carousel-motion>:nth-child(3n + 2) {
   
    --angle:120deg;
    transition-delay:.1s;
    transition-duration:1.12s;
}
.carousel-motion>:nth-child(3n + 3) {
   
    --angle:240deg;
}
.carousel-motion>:nth-child(1n + 4) {
   
    transition:1s ease-in-out;
    transform:translate3d(0,-100vh,calc(-2 * var(--perspective)));
    opacity:0;
}
main {
   
    animation:flyZ 2s backwards;
    display:grid;
    justify-items:center;
    align-items:center;
    height:100%;
    overflow:hidden;
    transform-style:preserve-3d;
}
section {
   
    animation:flyZ 2s backwards;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transform-style:preserve-3d;
    width:100%;
}
.carousel-motion:active {
   
    transition:.4s 75ms cubic-bezier(.16,1,.3,1);
    transform:scale(.8) rotateX(2deg)
}
@keyframes flyZ {
   
    0% {
   
    transform:scale(0) translateZ(calc(1 * var(--perspective)));
}
}