CSS animation rotation issue - css

Question

I have an animated infinite auto-scrolling carrousel. The tiles of the carrousel ares tilted to transform:rotateX(45deg) but they revert to 0deg because the animation for auto-scrolling has its own transform:. Since the animation is a loop I want the tiles to stay at a fixed rotation so there is no stutter through each loop.
.slider {
background: none;
height: 600px;
margin: auto;
overflow:hidden;
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.slider::before,
.slider::after {
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slide-track {
animation: scroll 5s linear infinite;
display: flex;
width: calc(300px * 14);
perspective: 9000px;
}
#keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-300px * 7))}
}
.slide {
width: 300px;
height: 500px;
background-color: #17141d;
margin-left: 30px;
transform: rotateX(45deg) scale(0.8);
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
display: flex;
justify-content: center;
overflow: hidden;
flex-direction: column;
align-items: center;
}
<div class="slider">
<div class="slide-track">
<div class="slide" ></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>

Answer 1

The transform property accepts multiple values simultaneously. In your case, change the keyframes declaration to this:
#keyframes scroll {
0% { transform: translateX(0) rotateX(45deg) scale(0.8); }
100% { transform: translateX(calc(-300px * 7)) rotateX(45deg) scale(0.8); }
}