So funktioniert ein cooler drehender 3D Bilder Slider

Wer Bilder in seine Webseite als Galerie einbetten will steht immer vor der Frage – WIE kann ich eine Galerie bauen die auffällt.

Heute zeige ich euch mal so eine sich drehende 3D Bilder Galerie – ihr lernt hier wie man sie aufbaut und könnt sich danach sehr einfach nachbauen.

Ja, ich bin mir sicher diese 3D Galerie wird auf eurer Webseite auffallen

Video

HTML

<div class="rotating-gallery">
      <a style="--i: 1" alt="">
        <img class="bild" src="bilder/bild1.jpg" />
      </a>

      <a style="--i: 2" alt="">
        <img class="bild" src="bilder/bild2.jpg" />
      </a>

      <a style="--i: 3" alt="">
        <img class="bild" src="bilder/bild3.jpg" />
      </a>

      <a style="--i: 4" alt="">
        <img class="bild" src="bilder/bild4.jpg" />
      </a>

      <a style="--i: 5" alt="">
        <img class="bild" src="bilder/bild5.jpg" />
      </a>

      <a style="--i: 6" alt="">
        <img class="bild" src="bilder/bild6.jpg" />
      </a>

      <a style="--i: 7" alt="">
        <img class="bild" src="bilder/bild7.jpg" />
      </a>

      <a style="--i: 8" alt="">
        <img class="bild" src="bilder/bild8.jpg" />
      </a>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #090252, #1104a4, #000);
  min-height: 100vh;
}
/*
.bild {
  width: 108px;
  height: 192px;
}
*/
.rotating-gallery {
  display: flex;
  position: relative;
  width: 12rem;
  height: 12rem;
  transform-style: preserve-3d;
  animation: rotation 30s linear infinite;
}

@keyframes rotation {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.rotating-gallery:hover {
  animation-play-state: paused;
}

.rotating-gallery a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);
  cursor: pointer;
}

.rotating-gallery a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: 800ms;
}

.rotating-gallery a:hover img {
  transform: translateY(-50px) scale(1.4);
  transition: 400ms;
}

@media (max-width: 1200px) {
  .rotating-gallery {
    width: 10rem;
    height: 10rem;
  }
  .rotating-gallery a {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(250px);
  }
}

@media (max-width: 768px) {
  .rotating-gallery {
    width: 5rem;
    height: 5rem;
  }
  .rotating-gallery a {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(150px);
  }
}

Ihr habt ja gesehen, es sind 8 Bilder und wenn man die gleichmässig verteilen möchte in einem Kreis von 360° dann kommt man auf 45°.

Genau aus diesem Grund findet ihr bei „.rotating-gallery a“ diese Zahl

transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);

Wenn ihr also mehr oder weniger Bilder habt, müsst ihr diese Zahl da anpassen