3D Slider

<section class="banner">
    <div class="slider" style="--quantity: 5">
        <div class="item" style="--position: 1"><img src=""></div>
        <div class="item" style="--position: 2"><img src=""></div>
        <div class="item" style="--position: 3"><img src=""></div>
        <div class="item" style="--position: 4"><img src=""></div>
        <div class="item" style="--position: 5"><img src=""></div>
    </div>
</section>

.banner {
    position: relative;

    width: 100%;
    height: 100vh;
    
    text-align: center;
    overflow: hidden;
}
.slider {
    position: absolute;
    top: 10%;
    left: calc(50% - 100px);

    width: 200px;
    height: 250px;

    transform-style: preserve-3d;
    transform: perspective(1500px);  ※2
}
.item {
    position: absolute;
    inset: 0 0 0 0;

    transform:
        rotateY(calc(   (var(--position) - 1) * (360deg / var(--quantity))  ))
        translateZ(250px);   ※1
}
.item img {
    width: 100%;
    height: 100%;
    
    object-fit: cover;
}