CSS animation rotation issue-CodePudding

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 >
            <div >
                <div  ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
        </div>

CodePudding user response：

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); }
}