آموزش طراحی اسلایدر چرخشی در المنتور

selector {     --quantity: 10; }

selector {     --position: 1; }

.banner{     width: 100%;     height: 100vh;     text-align: center;     overflow: hidden;     position: relative; } .banner .slider{     position: absolute;     width: 130px;     height: 175px; 	top: 10%;     left: calc(50% - 100px);     transform-style: preserve-3d;     transform: perspective(1000px);     animation: autoRun 40s linear infinite;     z-index: 2; } @keyframes autoRun{     from{         transform: perspective(1000px) rotateX(-15deg) rotateY(0deg); 	}to{         transform: perspective(1000px) rotateX(-15deg) rotateY(360deg); 	} }   .banner .slider .item{     position: absolute;     inset: 0 0 0 0;     transform:         rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))         translateZ(400px); } .banner .slider .item img{     width: 100%;     height: 100%;     object-fit: cover;     border-radius: 15px; }