.banner {
     width: var(--banner-width, 100%);
     height: var(--banner-height, 100vh);
     text-align: center;
     overflow: hidden;
     position: relative;
}
.banner .slider {
     position: absolute;
     width: 200px;
     height: 250px;
     top: 10%;
     left: calc(50% - 100px);
     transform-style: preserve-3d;
     transform: perspective(1000px);
     animation: autorun var(--animation-speed) linear infinite;
}

@keyframes autorun {
     from {
          transform: perspective(1000px) rotateX(var(--rotate-x)) rotateY(0deg);
     }
     to {
          transform: perspective(1000px) rotateX(var(--rotate-x)) rotateY(360deg);
     }
}

.banner .slider .item {
     position: absolute;
     inset: 0 0 0 0;
     transform: rotateY(calc((var(--position) - 1) * var(--angle-step) * 1deg)) translateZ(var(--depth));
}

.banner .slider .item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}