Geniale 3D Bilder Slider

Heute zeige ich euch mal wie man so einen genialen 3D Bilder Slider für die Webseite erstellen kann. Und bevor ihr fragt, ja natürlich ist es auch responsive 🙂

Video

HTML

<div class="scene">
      <div class="container" style="--n: 12">
        <img class="card" style="--i: 0" src="bilder/bild1.webp" />

        <img class="card" style="--i: 1" src="bilder/bild2.webp" />

        <img class="card" style="--i: 2" src="bilder/bild3.webp" />

        <img class="card" style="--i: 3" src="bilder/bild4.webp" />

        <img class="card" style="--i: 4" src="bilder/bild5.webp" />

        <img class="card" style="--i: 5" src="bilder/bild6.webp" />

        <img class="card" style="--i: 6" src="bilder/bild7.webp" />

        <img class="card" style="--i: 7" src="bilder/bild8.webp" />

        <img class="card" style="--i: 8" src="bilder/bild9.webp" />

        <img class="card" style="--i: 9" src="bilder/bild10.webp" />

        <img class="card" style="--i: 10" src="bilder/bild11.webp" />

        <img class="card" style="--i: 11" src="bilder/bild12.webp" />
      </div>
    </div>

CSS

:root {
  --bg: #ffbf9f;
}

html,
body {
  display: grid;
  margin: 0;
}

html {
  height: 100%;
}

body {
  background: var(--bg);

  place-items: center;
  min-height: 100%;
}

.scene,
.container {
  display: grid;
}

.scene {
  width: 80vw;

  min-height: 32vw;

  overflow: hidden;

  perspective: 40vw;

  mask: linear-gradient(90deg, #0000, red 20% 80%, #0000);
}

.container {
  place-self: center;

  transform-style: preserve-3d;

  animation: ry 10s linear infinite;

  will-change: transform;
}

/* einfachste Y-Achsen-Rotation: 1 volle Umdrehung */
@keyframes ry {
  to {
    rotate: y 1turn;
  }
}

.card {
  /* Basisbreite einer Karte */
  --w: 20vw;

  /* Basiswinkel pro Karte = 360° / Anzahl Karten */
  --ba: 1turn / var(--n);

  grid-area: 1 / 1;

  width: var(--w);
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 1.5vw;
  backface-visibility: hidden;

  box-shadow: 0 1.5vw 3vw -1vw rgb(0 0 0 / 0.25);

  transform: rotatey(calc(var(--i) * var(--ba))) translatez(calc(-1 * (0.5 * var(--w) + 0.5em) / tan(0.5 * var(--ba))));
}

.container:hover {
  animation-play-state: paused;
}