CSS Infinite 3D Sliders

In dieser Tutorial -Serie werden dynamische Bildschieber mit nur HTML und CSS erstellt. Wir werden zeigen, wie vielfältige Ergebnisse unabhängig von der Bildanzahl mit konsistenten Markup und unterschiedlichem CSS -Styling erzielt werden können. Frühere Raten zeigten einen kreisförmigen, unendlich rotierenden Schieberegler und einen schwankenden Schieberegler im Polaroidstil. Diese Rate befasst sich mit dreidimensionalen Schiebereglern. Obwohl sie anfänglich komplex sind, baut ein Großteil des Codes auf früheren Beispielen mit Modifikationen auf. Neuankömmlinge der Serie sollten die früheren Artikel für den grundlegenden Kontext überprüfen.

CSS Sliders Series Zusammenfassung

• kreisförmiges rotierendes Bild Slider
• durch Polaroidbilder
umblättern
Infinite 3D Sliders (aktueller Artikel)

Unser Ziel ist es, einen visuell ansprechenden 3D -Schieberegler zu erstellen. Auf den ersten Blick ähnelt es einem rotierenden Würfel mit vier Bildern; Es wird jedoch tatsächlich sechs strategisch angeordnete Bilder verwendet. Das Betrachten des Schiebers aus einer anderen Perspektive zeigt diese Anordnung.

Die Bildanordnung verstehen

Nachdem wir die Bildanordnung visualisiert haben, untersuchen wir den Code.

Grundstruktur

Die HTML bleibt mit früheren Schiebereglern überein:

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

CSS -Gitter wird verwendet, um die Bilder zu stapeln:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

Animationsinimpublik

transform-origin Die Logik des Schiebers spiegelt den kreisförmigen Schieberegler aus dem ersten Artikel wider. Die Bilder bilden ein Polygon; Eine vollständige Rotation kehrt zum ersten Bild zurück. Der frühere Schieberegler verwendete animation-delay und transform. Dieser 3D -Schieber

SASS wird verwendet, um Bilder zu durchlaufen und Transformationen anzuwenden:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

Die Eigenschaft

verwendet drei Werte: transform

Erste Drehung von Bildern. Der Winkel hängt von der Bildanzahl (n) ab, die um 360 ° C/n erhöht wird.
Übersetzung in die Zentrumpunkte. Die Entfernung wird als 50%/tan berechnet (180 Grad/n).
Rotation um die x-Achse (90 °) für die gewünschte Anordnung.

Behälterrotation für unendliche Schleifen

Schließlich erzeugt das Drehen des Behälters den unendlichen Schieberegler:

.gallery {
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes r {
  0%, 3% {transform: var(--_t) rotate(0deg); }
  @for $i from 1 to $n {
    #{($i/$n)*100 - 2}%, 
    #{($i/$n)*100 + 3}% {
      transform: var(--_t) rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: var(--_t) rotate(-360deg); }
}

Die Keyframes ähneln dem kreisförmigen Schieberegler und drehen den Behälter, um jedes Bild anzuzeigen. Die Rotation -90 -Grad -X -Achse -Rotation kompensiert die 90 -Grad -Rotation des Bildes, und die Perspektive fügt den 3D -Effekt hinzu.

Weitere Slider -Variationen: Vertikale und Würfel -Schieberegler

Der Artikel untersucht dann Variationen: Ein vertikaler Schieberegler (erreicht durch Ändern von rotate() auf rotateX() in Keyframes und Bildtransformationen) und ein Würfelschieber (unter Verwendung von sechs Bildern und spezifischen Rotationen für jedes Gesicht). Die Animation des Cube Slider ist komplexer und erfordert eine sorgfältige Orchestrierung von Rotationen an mehreren Achsen. Eine zufällige Variation von Cube Slider wird ebenfalls vorgestellt, wodurch nicht-sequentielle Rotationen für einen unvorhersehbaren Effekt eingeführt werden.

Schlussfolgerung

Das Tutorial schließt ab, indem es die Kraft von CSS bei der Erstellung komplexer Animationen mit minimalem HTML und JavaScript hervorhebt. Die Serie zeigt die Vielseitigkeit von CSS für den Aufbau interaktiver und visuell ansprechender Elemente.

Das obige ist der detaillierte Inhalt vonCSS Infinite 3D Sliders. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!