CSS Unendliche 3D-Schieberegler

In dieser Serie, haben wir Bild-Slider nur mit HTML und CSS erstellt. Die Idee ist, dass wir das gleiche Markup, aber unterschiedliches CSS verwenden können, um völlig unterschiedliche Ergebnisse zu erzielen, egal wie viele Bilder wir hineinwerfen. Wir begannen mit einem kreisförmigen Schieberegler, der sich unendlich dreht, ähnlich wie ein Fidget Spinner, der Bilder enthält. Dann haben wir einen erstellt, der durch einen Stapel Fotos blättert.

Diesmal 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 das, was wir in den ersten beiden Artikeln dieser Serie verwendet haben, mit einigen Änderungen. Wenn Sie also gerade erst in die Serie einsteigen, würde ich vorschlagen, sich die anderen anzusehen, um den Kontext zu den Konzepten zu erhalten, die wir hier verwenden.

Das ist unser Ziel:

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

Nachdem wir nun ein gutes Bild davon haben, wie die Bilder angeordnet sind, analysieren wir den Code, um zu sehen, wie wir dorthin gelangen.

Die Grundeinstellung

Gleicher HTML-Code wie der Rest der Schieberegler, die wir für die anderen Schieberegler verwendet haben:

Und wieder verwenden wir CSS Grid, um die Bilder in einem Stapel übereinander zu platzieren:

.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 sehr ähnlich zu der kreisförmige Schieberegler aus dem ersten Artikel. Wenn Sie sich das obige Video noch einmal ansehen, können Sie sehen, dass die Bilder so platziert sind, dass ein Polygon entsteht. Nach einer vollen Drehung kehrt es zum ersten Bild zurück.

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

Bei unserem 3D-Slider wird die Umsetzung etwas anders sein. Verwenden transform-origin wird hier nicht funktionieren, weil wir in 3D arbeiten, also werden wir verwenden transform Um stattdessen alle Bilder richtig zu platzieren, drehen Sie den Container.

Wir greifen wieder nach Sass, damit wir die Anzahl der Bilder durchlaufen 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 in Sass einsteigen. Wir haben in den anderen Artikeln mit einer festen Anzahl von Bildern unter Verwendung von Vanilla-CSS begonnen, bevor wir den Code mit Sass verallgemeinert haben, um eine beliebige Anzahl zu berücksichtigen (N) von Bildern. Nun, ich denke, Sie haben die Idee jetzt verstanden, und wir können all diese Entdeckungsarbeit streichen, um zur tatsächlichen Implementierung zu gelangen.

Das transform Eigenschaft nimmt drei Werte an, die ich hier dargestellt habe:

Wir drehen zuerst alle Bilder übereinander. Der Drehwinkel hängt von der Anzahl der Bilder ab. Zum N Bilder haben wir ein Inkrement gleich 360deg/N. Dann wir translate alle Bilder um den gleichen Betrag so, dass sich ihre Mittelpunkte an den Seiten treffen.

Es gibt eine langweilige Geometrie, die erklärt, wie das alles funktioniert, aber die Entfernung ist gleich 50%/tan(180deg/N). Wir haben uns mit einer ähnlichen Gleichung beschäftigt, als wir den kreisförmigen Schieber ( transform-origin: 50% 50%/sin(180deg/N) ).

Abschließend drehen wir die Bilder um die x-Achse um 90deg um die Anordnung zu bekommen, die wir wollen. Hier ist ein Video, das veranschaulicht, was die letzte Drehung bewirkt:

Jetzt müssen wir nur noch den gesamten Behälter 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, also gehen wir einen Moment zurück und sehen uns die Animation noch einmal an, die wir für den kreisförmigen Schieberegler erstellt haben. Das haben wir in diesem ersten Artikel geschrieben:

.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 die gleichen Prozentwerte, die gleiche Schleife und die gleiche 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 drehen müssen -90deg entlang der x-Achse, um die Bilder zu sehen, da wir sie bereits gedreht haben 90deg auf der gleichen Achse. Dann fügen wir einen Hauch von hinzu perspective um den 3D-Effekt zu erzielen.

Das ist es! Unser Slider 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 es in Gang zu bringen.

Vertikaler 3D-Schieberegler

Da wir im 3D-Raum spielen, warum nicht eine vertikale Version des vorherigen Schiebereglers erstellen? Der letzte dreht sich 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, erkennen Sie den Unterschied möglicherweise nicht sofort, da es sich nur um ein Zeichen handelt! ich ersetzte rotate() mit rotateX() innerhalb der Keyframes und des Bildes transform. Das ist es!

Es sollte angemerkt werden, dass rotate() entspricht rotateZ(), also durch Ändern der Achse aus Z zu X Wir wandeln den Schieberegler von der horizontalen Version in die vertikale um.

Würfelschieber

Ohne CSS können wir nicht über 3D sprechen Apropos Würfel. Und ja, das bedeutet, dass wir eine andere Version des Schiebereglers erstellen werden.

Die Idee hinter dieser Version des Schiebereglers ist, mit den Bildern eine tatsächliche Würfelform zu erstellen und das Ganze um die andere Achse zu drehen. Da es sich um einen Würfel handelt, haben wir es mit sechs Flächen zu tun. Wir verwenden sechs Bilder, eines für jede Seite des Würfels. Also kein Sass, sondern zurück zu Vanilla CSS.

Diese Animation ist ein wenig überwältigend, oder? Wo fängst du überhaupt an?

Wir haben sechs Gesichter, also müssen wir mindestens sechs Drehungen ausführen, damit jedes Bild eine Wendung bekommt. Nun, eigentlich brauchen wir fünf Drehungen – die letzte bringt uns zurück zur ersten Bildfläche. Wenn Sie sich einen Rubik's Cube – oder ein anderes würfelförmiges Objekt wie Würfel – schnappen und ihn mit der Hand drehen, haben 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); }
}

Das transform Die Eigenschaft beginnt mit null Drehungen, und bei jedem Zustand hängen wir eine neue Drehung an einer bestimmten Achse an, bis wir sechs Drehungen erreichen. Dann sind wir wieder beim ersten Bild.

Vergessen wir nicht die Platzierung unserer Bilder. Jeder wird unter Verwendung von auf eine Fläche des Würfels aufgebracht transform:

.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. Alles, was ich getan habe, war, DevTools zu öffnen und mit unterschiedlichen Rotationswerten für jedes Bild zu spielen, bis ich es richtig hinbekommen habe. Es mag dumm klingen, aber hey, es funktioniert – zumal wir eine feste Anzahl von Bildern haben und nicht nach etwas suchen, das unterstützt N Bilder.

Vergessen Sie die Werte, die ich verwende, und versuchen Sie, die Platzierung selbst als Übung durchzuführen. Beginnen Sie mit allen übereinander gestapelten Images, öffnen Sie die DevTools und legen Sie los! Sie werden wahrscheinlich mit einem anderen Code enden und das ist völlig in Ordnung. Es gibt verschiedene Möglichkeiten, die Bilder zu positionieren.

Was ist der Trick mit dem Komma in der var()? Ist es ein Tippfehler?

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

Aus die spezifikation:

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

Zufälliger Würfelschieber

Ein bisschen Zufälligkeit kann eine nette Verbesserung für diese Art von Animation sein. Anstatt also den Würfel der Reihe nach zu drehen, können wir sozusagen würfeln und den Würfel rollen lassen, wie er will.

Cool oder? Ich weiß nicht wie es euch geht, aber diese Version gefällt mir besser! Es ist interessanter und die Übergänge sind befriedigend anzusehen. Und rate was? Sie können mit den Werten spielen, um Ihren eigenen Zufallswürfel-Schieberegler zu erstellen!

Die Logik ist tatsächlich überhaupt nicht zufällig – es scheint nur so. Du definierst a transform auf jedem Keyframe, mit dem Sie ein Gesicht zeigen können und … nun, das ist es wirklich! Sie können jede gewünschte Bestellung auswä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 benutze rotate3d() Dieses Mal verlasse ich 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, weil es einfach keine gibt. Ich definiere separate Transformationen und beobachte dann das „zufällige“ Ergebnis. Stellen Sie sicher, dass das erste Bild das erste bzw. letzte Bild ist, und zeigen Sie auf jedem der anderen Bilder ein anderes Bild.

Sie sind nicht verpflichtet, a rotate3d() verwandeln, wie ich es tat. Sie können auch verschiedene Rotationen verketten, wie wir es im vorherigen Beispiel getan haben. Spielen Sie herum und sehen Sie, was Sie sich einfallen lassen können! Ich werde darauf warten, dass Sie Ihre Version mit mir im Kommentarbereich teilen!

Wrapping up

Ich hoffe euch hat diese kleine Serie gefallen. Wir haben einige lustige (und lustige) Schieberegler gebaut und dabei viel über alle Arten von CSS-Konzepten gelernt – von der Rasterplatzierung und Stapelreihenfolge bis hin zu Animationsverzögerungen und -transformationen. Wir mussten sogar mit einer Prise Sass spielen, um eine Reihe von Elementen zu durchlaufen.

Und wir haben das alles mit genau dem gleichen HTML für jeden einzelnen Slider gemacht, den wir erstellt haben. Wie cool ist das? CSS ist verdammt leistungsfähig und in der Lage, so viel ohne die Hilfe von JavaScript zu erreichen.