CSS Unendliche 3D Schieberegler

In dieser Serie haben wir Bildschieberegler nur mit HTML und CSS erstellt. Die Idee ist, dass wir denselben Markup, aber unterschiedliches CSS verwenden können, um sehr unterschiedliche Ergebnisse zu erzielen, egal wie viele Bilder wir hinzufügen. Wir begannen mit einem kreisförmigen Schieberegler, der sich unendlich dreht, ähnlich einem Kreisel, der Bilder hält. Dann haben wir einen erstellt, der durch einen Stapel von Fotos blättert.

Dieses Mal tauchen wir in die dritte Dimension ein. Es wird zunächst schwierig aussehen, aber ein Großteil des Codes, den wir uns ansehen, ist genau derselbe, den wir in den ersten beiden Artikeln dieser Serie verwendet haben, mit einigen Modifikationen. Wenn Sie also gerade erst mit der Serie beginnen, empfehle ich Ihnen, sich die anderen Artikel anzusehen, um den Kontext zu den hier verwendeten Konzepten zu erhalten.

Darauf arbeiten wir hin

Auf den ersten Blick sieht es so aus, als hätten wir einen rotierenden Würfel mit vier Bildern. Aber in Wirklichkeit haben wir insgesamt sechs Bilder. Hier ist der Schieberegler aus einem anderen Winkel

Nachdem wir nun eine gute visuelle Vorstellung davon haben, wie die Bilder angeordnet sind, zerlegen wir den Code, um zu sehen, wie wir dorthin gelangen.

Die Grundeinrichtung

Gleiches HTML wie bei den übrigen Schiebereglern, die wir für die anderen Schieberegler verwendet haben

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

Und wieder verwenden wir CSS Grid, um die Bilder in einem Stapel, übereinander, anzuordnen

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

Die Animation

Die Logik für diesen Schieberegler ist der des kreisförmigen Schiebereglers aus dem ersten Artikel sehr ähnlich. Tatsächlich können Sie, wenn Sie sich das Video oben noch einmal ansehen, erkennen, dass die Bilder so platziert sind, dass sie ein Polygon bilden. Nach einer vollen Umdrehung kehrt er zum ersten Bild zurück.

Wir haben uns auf die CSS-Eigenschaften `transform-origin` und `animation-delay` für diesen ersten Schieberegler verlassen. Dieselbe Animation wird auf alle Bildelemente angewendet, die sich um denselben Punkt drehen. Dann, durch die Verwendung unterschiedlicher Verzögerungen, platzieren wir alle Bilder korrekt um einen großen Kreis.

Die Implementierung wird für unseren 3D-Schieberegler etwas anders sein. Die Verwendung von `transform-origin` funktioniert hier nicht, da wir in 3D arbeiten. Daher werden wir stattdessen `transform` verwenden, um alle Bilder korrekt zu platzieren und dann den Container zu drehen.

Wir greifen erneut auf Sass zurück, damit wir durch die Anzahl der Bilder iterieren und unsere Transformationen anwenden können

@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 */
  }
}

Sie fragen sich vielleicht, warum wir direkt zu Sass springen. Wir haben in den anderen Artikeln mit einer festen Anzahl von Bildern in reinem CSS begonnen, bevor wir den Code mit Sass verallgemeinert haben, um jede Anzahl (N) von Bildern zu berücksichtigen. Nun, ich denke, Sie verstehen die Idee jetzt und wir können die ganze Entdeckungsarbeit überspringen, um zur eigentlichen Implementierung zu gelangen.

Die Eigenschaft `transform` nimmt drei Werte an, die ich hier veranschaulicht habe

Zuerst drehen wir alle Bilder übereinander. Der Drehwinkel hängt von der Anzahl der Bilder ab. Für N Bilder haben wir eine Inkrementierung von 360 Grad/N. Dann verschieben wir (translate) alle Bilder um den gleichen Betrag, so dass ihre Mittelpunkte an den Seiten zusammenkommen.

Es gibt einige langweilige Geometrie, die erklärt, wie das alles funktioniert, aber der Abstand ist gleich 50%/tan(180 Grad/N). Wir hatten eine ähnliche Gleichung, als wir den kreisförmigen Schieberegler erstellten (transform-origin: 50% 50%/sin(180 Grad/N)).

Schließlich drehen wir die Bilder um die x-Achse um 90 Grad, um die gewünschte Anordnung zu erhalten. Hier ist ein Video, das veranschaulicht, was die letzte Drehung bewirkt

Jetzt müssen wir nur noch den gesamten Container drehen, um unseren unendlichen Schieberegler zu erstellen.

.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); }
}

Dieser Code ist möglicherweise schwer zu verstehen, daher lassen Sie uns einen Moment zurücktreten und die Animation, die wir für den kreisförmigen Schieberegler erstellt haben, noch einmal überprüfen. Das ist es, was wir in diesem ersten Artikel geschrieben haben

.gallery {
  animation: m 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes m {
  0%, 3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%,
    #{($i / $n) * 100 + 3}% { 
      transform: rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: rotate(-360deg); }
}

Die Keyframes sind fast identisch. Wir haben dieselben Prozentwerte, denselben Loop und dieselbe Drehung.

Warum sind beide gleich? Weil ihre Logik dieselbe ist. In beiden Fällen sind die Bilder kreisförmig angeordnet und wir müssen das Ganze drehen, um jedes Bild anzuzeigen. So konnte ich die Keyframes vom kreisförmigen Schieberegler kopieren und denselben Code für unseren 3D-Schieberegler verwenden. Der einzige Unterschied besteht darin, dass wir den Container um -90 Grad entlang der x-Achse drehen müssen, um die Bilder zu sehen, da wir sie bereits um 90 Grad auf derselben Achse gedreht haben. Dann fügen wir einen Hauch von `perspective` hinzu, um den 3D-Effekt zu erzielen.

Das war's! Unser Schieberegler ist fertig. Hier ist noch einmal die vollständige Demo. Alles, was Sie tun müssen, ist, so viele Bilder hinzuzufügen, wie Sie möchten, und eine Variable zu aktualisieren, um ihn zu starten.

Vertikaler 3D-Schieberegler

Da wir im 3D-Raum spielen, warum nicht eine vertikale Version des vorherigen Schiebereglers erstellen? Der letzte rotiert entlang der z-Achse, aber wir können uns auch entlang der x-Achse bewegen, wenn wir wollen.

Wenn Sie den Code für beide Versionen dieses Schiebereglers vergleichen, werden Sie den Unterschied vielleicht nicht sofort erkennen, da es nur ein Zeichen ist! Ich habe `rotate()` durch `rotateX()` in den Keyframes und der Bild-`transform` ersetzt. Das war's!

Es sollte beachtet werden, dass `rotate()` äquivalent zu `rotateZ()` ist. Durch die Änderung der Achse von Z auf X verwandeln wir den Schieberegler von der horizontalen in die vertikale Version.

Würfel-Schieberegler

Wir können nicht über 3D in CSS sprechen, ohne über Würfel zu sprechen. Und ja, das bedeutet, wir werden eine weitere Version des Schiebereglers erstellen.

Die Idee hinter dieser Version des Schiebereglers ist, eine tatsächliche Würfelform mit den Bildern zu erstellen und das Ganze um verschiedene Achsen zu drehen. Da es ein Würfel ist, haben wir es mit sechs Seiten zu tun. Wir werden sechs Bilder verwenden, eines für jede Seite des Würfels. Also, kein Sass, sondern zurück zu reinem CSS.

Diese Animation ist etwas überwältigend, oder? Wo fängt man überhaupt an?

Wir haben sechs Seiten, also müssen wir mindestens sechs Rotationen durchführen, damit jedes Bild an die Reihe kommt. Nun, tatsächlich brauchen wir fünf Rotationen – die letzte bringt uns zurück zum ersten Bild. Wenn Sie einen Zauberwürfel – oder einen anderen würfelförmigen Gegenstand wie Würfel – nehmen und ihn mit der Hand drehen, bekommen Sie eine gute Vorstellung davon, was wir tun.

.gallery {
  --s: 250px; /* the size */

  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

@keyframes r {
  0%, 3%   { transform: var(--_p); }
  14%, 19% { transform: var(--_p) rotateX(90deg); }
  31%, 36% { transform: var(--_p) rotateX(90deg) rotateZ(90deg); }
  47%, 52% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  64%, 69% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  81%, 86% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  97%, 100%{ transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
}

Die `transform`-Eigenschaft beginnt mit null Rotationen und in jedem Zustand fügen wir eine neue Rotation auf einer bestimmten Achse hinzu, bis wir sechs Rotationen erreicht haben. Dann sind wir wieder beim ersten Bild.

Vergessen wir nicht die Platzierung unserer Bilder. Jedes wird mit `transform` auf eine Seite des Würfels angewendet

.gallery img {
  grid-area: 1 / 1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(2) { --_t: rotateX(-90deg); }
.gallery img:nth-child(3) { --_t: rotateY( 90deg) rotate(-90deg); }
.gallery img:nth-child(4) { --_t: rotateX(180deg) rotate( 90deg); }
.gallery img:nth-child(5) { --_t: rotateX( 90deg) rotate( 90deg); }
.gallery img:nth-child(6) { --_t: rotateY(-90deg); }

Sie denken wahrscheinlich, dass hinter den Werten, die ich dort verwende, eine seltsame komplexe Logik steckt, richtig? Nun, nein. Ich habe einfach DevTools geöffnet und mit verschiedenen Rotationswerten für jedes Bild herumgespielt, bis ich es richtig hatte. Es mag dumm klingen, aber hey, es funktioniert – besonders da wir eine feste Anzahl von Bildern haben und nicht nach etwas suchen, das N Bilder unterstützt.

Tatsächlich vergessen Sie die Werte, die ich verwende, und versuchen Sie, die Platzierung selbst als Übung vorzunehmen. Beginnen Sie mit allen Bildern übereinander gestapelt, öffnen Sie die DevTools und los geht's! Sie werden wahrscheinlich mit anderem Code enden, und das ist völlig in Ordnung. Es kann verschiedene Möglichkeiten geben, die Bilder zu positionieren.

Was ist der Trick mit dem Komma innerhalb von `var()`? Ist es ein Tippfehler?

Es ist kein Tippfehler, also entfernen Sie ihn nicht! Wenn Sie ihn entfernen, werden Sie feststellen, dass er die Platzierung des ersten Bildes beeinflusst. Sie können sehen, dass ich in meinem Code `--_t` für alle Bilder außer dem ersten definiert habe, da ich für dieses nur eine Übersetzung benötige. Dieses Komma lässt die Variable auf einen Nullwert zurückfallen. Ohne das Komma haben wir keinen Fallback und der gesamte Wert ist ungültig.

Aus der Spezifikation

Hinweis: Das heißt, `var(--a,)` ist eine gültige Funktion, die angibt, dass, wenn die benutzerdefinierte Eigenschaft `--a` ungültig oder fehlt, `var()` durch nichts ersetzt werden soll.

Zufälliger Würfel-Schieberegler

Ein wenig Zufälligkeit kann eine schöne Verbesserung für diese Art von Animation sein. Anstatt den Würfel in sequenzieller Reihenfolge zu drehen, können wir also würfeln, um es so auszudrücken, und den Würfel so rollen lassen, wie er will.

Cool, oder? Ich weiß nicht, wie es Ihnen geht, aber ich mag diese Version besser! Sie ist interessanter und die Übergänge sind befriedigend anzusehen. Und wissen Sie was? Sie können mit den Werten spielen, um Ihren eigenen zufälligen Würfel-Schieberegler zu erstellen!

Die Logik ist eigentlich gar nicht zufällig – sie erscheint nur so. Sie definieren eine `transform` in jedem Keyframe, die es Ihnen ermöglicht, eine Seite anzuzeigen und… nun, das ist eigentlich alles! Sie können jede gewünschte Reihenfolge wählen.

@keyframes r {
  0%, 3%   { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
  14%,19%  { transform: var(--_p) rotate3d(-1, 1, 0,180deg); }
  31%,36%  { transform: var(--_p) rotate3d( 0,-1, 0, 90deg); }
  47%,52%  { transform: var(--_p) rotate3d( 1, 0, 0, 90deg); }
  64%,69%  { transform: var(--_p) rotate3d( 1, 0, 0,-90deg); }
  81%,86%  { transform: var(--_p) rotate3d( 0, 1, 0, 90deg); }
  97%,100% { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
}

Ich verwende diesmal `rotate3d()`, verlasse mich aber immer noch auf DevTools, um die Werte zu finden, die sich für mich "richtig" anfühlen. Versuchen Sie nicht, eine Beziehung zwischen den Keyframes zu finden, da es einfach keine gibt. Ich definiere separate Transformationen und beobachte dann das "zufällige" Ergebnis. Stellen Sie sicher, dass das erste Bild im ersten und letzten Frame ist und auf jedem der anderen Frames ein anderes Bild angezeigt wird.

Sie sind nicht verpflichtet, eine `rotate3d()`-Transformation zu verwenden, wie ich es getan habe. Sie können auch verschiedene Rotationen verketten, wie wir es im vorherigen Beispiel getan haben. Spielen Sie herum und sehen Sie, was Sie entwickeln können! Ich werde darauf warten, dass Sie Ihre Version im Kommentarbereich mit mir teilen!

Zusammenfassung

Ich hoffe, Sie haben diese kleine Serie genossen. Wir haben einige lustige (und alberne) Schieberegler erstellt und dabei viel über alle Arten von CSS-Konzepten gelernt – von der Grid-Platzierung und Stapelreihenfolge bis hin zu Animationsverzögerungen und Transformationen. Wir haben sogar mit einem Hauch von Sass gespielt, um durch ein Array von Elementen zu iterieren.

Und das alles mit exakt demselben HTML für jeden einzelnen Schieberegler, den wir erstellt haben. Wie cool ist das denn? CSS ist verdammt mächtig und kann so viel ohne die Hilfe von JavaScript erreichen.