Слайдер работает, НО, он не бесконечный а нужен именно такой, а также свойство rotate применяется только к 1 фото, их например 8, что нужно добавить чтобы все было безупречно?
.gal {
position: relative;
width: 300px;
height: 200px;
transform-style: preserve-3d;
animation: rotate 15s linear;
}
@keyframes rotate {
from {
transform: perspective(1200px) rotateY(0deg);
}
to {
transform: perspective(1200px) rotateY(360deg);
}
}
.gal span {
position: absolute;
width: 100%;
height: 100%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * 45deg)) translateZ(380px);
transform: rotateY(calc(var(--i) * 45deg)) translateZ(380px);
}
.gal span img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
<section class="gal">
<span style="--i:1">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
<img src="img/intro_bg.jpg" alt="intro">
</span>
</section