.scene, .a3d {
  display: grid;
}
.scene {
  overflow: hidden;
  perspective: 28em;
  height: 17em;
  align-content: center;
  mask: linear-gradient(90deg, #0000, red 20% 80%, #0000);
}
.a3d {
  place-self: center;
  transform-style: preserve-3d;
  animation: ry 32s linear infinite;
}
@keyframes ry {
  to {
    rotate: y 1turn;
  }
}
.card {
  --w: 11.5em;
  --ba: 1turn/var(--n);
  grid-area: 1/1;
  width: var(--w);
  aspect-ratio: 7/10;
  object-fit: cover;
  border-radius: 1.5em;
  backface-visibility: hidden;
  transform: rotatey(calc(var(--i)*var(--ba))) translatez(calc(-1*(.5*var(--w) + .5em)/tan(.5*var(--ba))));
}

@media (max-width: 768px) {
  .scene {
    height: 13.5em;
    perspective: 22em;
  }
  .card {
    --w: 9em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a3d {
    animation-duration: 128s;
  }
}