Cover Flow

.carousel {
  padding-inline: calc(50% - 50px);
  scroll-snap-type: x mandatory;
}

ul {
  white-space: nowrap;
  transform-style: preserve-3d;
}

li {
  display: inline-block;
  position: relative;
  width: 100px;
  aspect-ratio: 1 / 2;
  transform-style: preserve-3d;
  scroll-snap-align: center;

  view-timeline: --slide inline calc(50% - 140px);
}

.slide {
  perspective: 500px;
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  aspect-ratio: 1;
  transform-style: preserve-3d;

  animation: linear slide-cover both;
  animation-timeline: --slide;
  animation-range: contain;
}

.card {
  width: 100%;
  height: 100%;

  animation: linear rotate-cover both;
  animation-timeline: --slide;
  animation-range: contain;
}

@keyframes rotate-cover {
  0% {
    transform: rotateY(-55deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(55deg);
  }
}

@keyframes slide-cover {
  0% {
    transform: translateX(30%);
  }
  50% {
    transform: translateX(0) scale(1.2);
  }
  100% {
    transform: translateX(-30%);
  }
}

<BlossomCarousel class="carousel">
  <ul>
    <li>
      <div class="slide">
        <div class="card"></div>
      </div>
    </li>
    <li>
      <div class="slide">
        <div class="card"></div>
      </div>
    </li>
    ...
  </ul>
</BlossomCarousel>

li {
  view-timeline: --slide inline calc(50% - 140px);
}

.slide {
  animation: linear slide-cover both;
  animation-timeline: --slide;
  animation-range: contain;
}

.card {
  animation: linear rotate-cover both;
  animation-timeline: --slide;
  animation-range: contain;
}

@keyframes rotate-cover {
  0% {
    transform: rotateY(-55deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(55deg);
  }
}

@keyframes slide-cover {
  0% {
    transform: translateX(30%);
  }
  50% {
    transform: translateX(0) scale(1.2);
  }
  100% {
    transform: translateX(-30%);
  }
}

<BlossomCarousel class="py-24 snap-x snap-mandatory px-[calc(50%-50px)]!">
  <ul class="whitespace-nowrap! transform-3d">
    <li
      v-for="i in 12"
      :key="i"
      class="inline-block! relative transform-3d snap-center w-[100px] aspect-1/2 even:*:*:bg-primary-400"
    >
      <div
        class="perspective-normal slide absolute transform-3d top-0 -left-1/2 aspect-square w-[200%]"
      >
        <div
          class="card bg-primary rounded-lg flex items-center justify-center text-2xl font-bold text-white size-full"
        >
          {{ i }}
        </div>
      </div>
    </li>
  </ul>
</BlossomCarousel>