CSS Infinite 3D Sliders

Σε αυτή τη σειρά, φτιάχναμε ρυθμιστικά εικόνας με τίποτα άλλο εκτός από HTML και CSS. Η ιδέα είναι ότι μπορούμε να χρησιμοποιήσουμε την ίδια σήμανση αλλά διαφορετικό CSS για να λάβουμε τρελά διαφορετικά αποτελέσματα, όσες εικόνες κι αν πετάξουμε μέσα. Ξεκινήσαμε με ένα κυκλικό ρυθμιστικό που περιστρέφεται απεριόριστα, σαν ένα fidget spinner που συγκρατεί εικόνες. Στη συνέχεια φτιάξαμε ένα που ξεφυλλίζει μια στοίβα φωτογραφιών.

Αυτή τη φορά, βουτάμε στην τρίτη διάσταση. Θα φανεί σκληρό στην αρχή, αλλά μεγάλο μέρος του κώδικα που εξετάζουμε είναι ακριβώς αυτό που χρησιμοποιήσαμε στα δύο πρώτα άρθρα αυτής της σειράς, με ορισμένες τροποποιήσεις. Έτσι, αν μόλις τώρα μπαίνεις στη σειρά, θα σου πρότεινα να ελέγξεις τις υπόλοιπες για το πλαίσιο σχετικά με τις έννοιες που χρησιμοποιούμε εδώ.

Αυτό στοχεύουμε:

Με την πρώτη ματιά, φαίνεται ότι έχουμε έναν περιστρεφόμενο κύβο με τέσσερις εικόνες. Στην πραγματικότητα όμως, έχουμε να κάνουμε με έξι συνολικά εικόνες. Εδώ είναι το ρυθμιστικό από διαφορετική οπτική γωνία:

Τώρα που έχουμε μια καλή οπτική για το πώς είναι τακτοποιημένα οι εικόνες, ας αναλύσουμε τον κώδικα για να δούμε πώς φτάνουμε εκεί.

Η βασική ρύθμιση

Ίδιο HTML με τα υπόλοιπα ρυθμιστικά που χρησιμοποιήσαμε για τα άλλα ρυθμιστικά:

Και για άλλη μια φορά, χρησιμοποιούμε το CSS Grid για να τοποθετήσουμε τις εικόνες σε μια στοίβα, τη μία πάνω στην άλλη:

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

Το κινούμενο σχέδιο

Η λογική για αυτό το ρυθμιστικό είναι πολύ παρόμοια με το κυκλικό ρυθμιστικό από το πρώτο άρθρο. Μάλιστα, αν ελέγξετε ξανά το παραπάνω βίντεο, μπορείτε να δείτε ότι οι εικόνες είναι τοποθετημένες με τρόπο που δημιουργεί ένα πολύγωνο. Μετά από μια πλήρη περιστροφή, επιστρέφει στην πρώτη εικόνα.

Βασιστήκαμε στο CSS transform-origin και animation-delay ιδιότητες για αυτό το πρώτο ρυθμιστικό. Το ίδιο κινούμενο σχέδιο εφαρμόζεται σε όλα τα στοιχεία της εικόνας, τα οποία περιστρέφονται γύρω από το ίδιο σημείο. Στη συνέχεια, χρησιμοποιώντας διαφορετικές καθυστερήσεις, τοποθετούμε σωστά όλες τις εικόνες γύρω από έναν μεγάλο κύκλο.

Η υλοποίηση θα είναι λίγο διαφορετική για το 3D ρυθμιστικό μας. Χρησιμοποιώντας transform-origin δεν θα λειτουργήσει εδώ επειδή εργαζόμαστε σε 3D, επομένως θα χρησιμοποιήσουμε transform αντί για να τοποθετήσετε σωστά όλες τις εικόνες και, στη συνέχεια, περιστρέψτε το κοντέινερ.

Φτάνουμε ξανά στο Sass, ώστε να μπορούμε να κάνουμε βρόχο στον αριθμό των εικόνων και να εφαρμόσουμε τους μετασχηματισμούς μας:

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

Ίσως αναρωτιέστε γιατί πηδάμε κατευθείαν στο Sass. Ξεκινήσαμε με έναν σταθερό αριθμό εικόνων χρησιμοποιώντας CSS βανίλιας στα άλλα άρθρα πριν γενικεύσουμε τον κώδικα με το Sass για να λάβουμε υπόψη οποιονδήποτε αριθμό (N) εικόνων. Λοιπόν, νομίζω ότι καταλάβατε την ιδέα τώρα και μπορούμε να κόψουμε όλη αυτή την ανακάλυψη για να φτάσουμε στην πραγματική εφαρμογή.

Η transform Η ιδιότητα παίρνει τρεις τιμές, τις οποίες έχω επεξηγήσει εδώ:

Περιστρέφουμε πρώτα όλες τις εικόνες η μία πάνω από την άλλη. Η γωνία περιστροφής εξαρτάται από τον αριθμό των εικόνων. Για N εικόνες, έχουμε μια αύξηση ίση με 360deg/N. Μετά εμείς translate όλες οι εικόνες στο ίδιο ποσό με τρόπο που κάνει τα κεντρικά σημεία τους να συναντώνται στα πλάγια.

Υπάρχει κάποια βαρετή γεωμετρία που εξηγεί πώς λειτουργούν όλα αυτά, αλλά η απόσταση είναι ίση με 50%/tan(180deg/N). Αντιμετωπίσαμε μια παρόμοια εξίσωση όταν κάναμε το κυκλικό ρυθμιστικό ( transform-origin: 50% 50%/sin(180deg/N) ).

Τέλος, περιστρέφουμε τις εικόνες γύρω από τον άξονα x κατά 90deg για να πάρουμε τη ρύθμιση που θέλουμε. Ακολουθεί ένα βίντεο που δείχνει τι κάνει η τελευταία περιστροφή:

Τώρα το μόνο που έχουμε να κάνουμε είναι να περιστρέψουμε ολόκληρο το δοχείο για να δημιουργήσουμε το άπειρο ρυθμιστικό μας.

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

Αυτός ο κώδικας μπορεί να είναι δύσκολο να γίνει κατανοητός, οπότε ας κάνουμε ένα βήμα πίσω και ας ξαναδούμε την κινούμενη εικόνα που δημιουργήσαμε για το κυκλικό ρυθμιστικό. Αυτά γράψαμε στο πρώτο άρθρο:

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

Τα βασικά καρέ είναι σχεδόν ίδια. Έχουμε τις ίδιες ποσοστιαίες τιμές, τον ίδιο βρόχο και την ίδια περιστροφή.

Γιατί είναι και τα δύο ίδια; Γιατί η λογική τους είναι η ίδια. Και στις δύο περιπτώσεις, οι εικόνες είναι διατεταγμένες γύρω από ένα κυκλικό σχήμα και πρέπει να περιστρέψουμε ολόκληρο το πράγμα για να εμφανιστεί κάθε εικόνα. Έτσι μπόρεσα να αντιγράψω τα βασικά καρέ από το κυκλικό ρυθμιστικό και να χρησιμοποιήσω τον ίδιο κώδικα για το 3D ρυθμιστικό μας. Η μόνη διαφορά είναι ότι πρέπει να περιστρέψουμε το δοχείο κατά -90deg κατά μήκος του άξονα x για να δείτε τις εικόνες αφού τις έχουμε ήδη περιστρέψει κατά 90deg στον ίδιο άξονα. Στη συνέχεια προσθέτουμε μια πινελιά από perspective για να πάρετε το 3D εφέ.

Αυτό είναι! Το ρυθμιστικό μας έχει τελειώσει. Εδώ είναι πάλι το πλήρες demo. Το μόνο που έχετε να κάνετε είναι να προσθέσετε όσες εικόνες θέλετε και να ενημερώσετε μία μεταβλητή για να το κάνετε.

Κάθετο 3D ρυθμιστικό

Αφού παίζουμε στον τρισδιάστατο χώρο, γιατί να μην φτιάξουμε μια κάθετη έκδοση του προηγούμενου ρυθμιστικού; Το τελευταίο περιστρέφεται κατά μήκος του άξονα z, αλλά μπορούμε να κινηθούμε και κατά μήκος του άξονα x αν θέλουμε.

Εάν συγκρίνετε τον κώδικα και για τις δύο εκδόσεις αυτού του ρυθμιστικού, μπορεί να μην εντοπίσετε αμέσως τη διαφορά επειδή είναι μόνο ένας χαρακτήρας! αντικατέστησα rotate() με rotateX() μέσα στα βασικά καρέ και την εικόνα transform. Αυτό είναι!

πρέπει να σημειωθεί ότι rotate() είναι ισοδύναμο με rotateZ(), έτσι αλλάζοντας τον άξονα από Z προς την X μετατρέπουμε το ρυθμιστικό από την οριζόντια έκδοση σε κάθετη.

Ρυθμιστικό κύβου

Δεν μπορούμε να μιλήσουμε για 3D σε CSS χωρίς μιλώντας για κύβους. Και ναι, αυτό σημαίνει ότι πρόκειται να φτιάξουμε μια άλλη έκδοση του ρυθμιστικού.

Η ιδέα πίσω από αυτήν την έκδοση του ρυθμιστικού είναι να δημιουργήσετε ένα πραγματικό σχήμα κύβου με τις εικόνες και να περιστρέψετε ολόκληρο το αντικείμενο γύρω από τον διαφορετικό άξονα. Εφόσον είναι κύβος, έχουμε να κάνουμε με έξι όψεις. Θα χρησιμοποιήσουμε έξι εικόνες, μία για κάθε όψη του κύβου. Έτσι, όχι Sass αλλά πίσω στο vanilla CSS.

Αυτό το κινούμενο σχέδιο είναι λίγο συντριπτικό, σωστά; Από πού ξεκινάς;

Έχουμε έξι όψεις, επομένως πρέπει να κάνουμε τουλάχιστον έξι περιστροφές έτσι ώστε κάθε εικόνα να παίρνει μια στροφή. Λοιπόν, στην πραγματικότητα, χρειαζόμαστε πέντε περιστροφές - η τελευταία μας φέρνει πίσω στο πρώτο πρόσωπο της εικόνας. Αν πάτε να πιάσετε έναν κύβο του Ρούμπικ — ή κάποιο άλλο αντικείμενο σε σχήμα κύβου, όπως ζάρια — και να τον περιστρέψετε με το χέρι σας, θα έχετε μια καλή ιδέα για το τι κάνουμε.

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

Η transform Η ιδιότητα ξεκινά με μηδενικές περιστροφές και, σε κάθε κατάσταση, προσθέτουμε μια νέα περιστροφή σε έναν συγκεκριμένο άξονα μέχρι να φτάσουμε στις έξι περιστροφές. Μετά επιστρέφουμε στην πρώτη εικόνα.

Ας μην ξεχνάμε την τοποθέτηση των εικόνων μας. Κάθε ένα εφαρμόζεται σε μια επιφάνεια του κύβου χρησιμοποιώντας 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); }

Μάλλον σκέφτεστε ότι υπάρχει περίεργη σύνθετη λογική πίσω από τις τιμές που χρησιμοποιώ εκεί, σωστά; Λοιπόν όχι. Το μόνο που έκανα ήταν να ανοίξω το DevTools και να παίξω με διαφορετικές τιμές περιστροφής για κάθε εικόνα μέχρι να το καταφέρω σωστά. Μπορεί να ακούγεται ανόητο, αλλά, ρε, λειτουργεί — ειδικά επειδή έχουμε σταθερό αριθμό εικόνων και δεν ψάχνουμε κάτι που να υποστηρίζει N εικόνες.

Στην πραγματικότητα, ξεχάστε τις τιμές που χρησιμοποιώ και προσπαθήστε να κάνετε την τοποθέτηση μόνοι σας ως άσκηση. Ξεκινήστε με όλες τις εικόνες στοιβαγμένες τη μία πάνω στην άλλη, ανοίξτε τα DevTools και προχωρήστε! Πιθανότατα θα καταλήξετε με διαφορετικό κώδικα και αυτό είναι απολύτως εντάξει. Μπορεί να υπάρχουν διαφορετικοί τρόποι τοποθέτησης των εικόνων.

Ποιο είναι το κόλπο με το κόμμα μέσα στο var()? Είναι τυπογραφικό λάθος;

Δεν είναι τυπογραφικό λάθος, οπότε μην το αφαιρέσετε! Εάν το αφαιρέσετε, θα παρατηρήσετε ότι επηρεάζει την τοποθέτηση της πρώτης εικόνας. Μπορείτε να το δείτε στον κώδικα που όρισα --_t για όλες τις εικόνες εκτός από την πρώτη γιατί χρειάζομαι μόνο μετάφραση για αυτό. Αυτό το κόμμα κάνει τη μεταβλητή να επιστρέψει σε μηδενική τιμή. Χωρίς κόμμα, δεν θα έχουμε εναλλακτική και ολόκληρη η τιμή θα είναι άκυρη.

Από η προδιαγραφή:

Σημείωση: Δηλαδή, var(--a,) είναι μια έγκυρη συνάρτηση, προσδιορίζοντας ότι εάν το --a Η προσαρμοσμένη ιδιότητα δεν είναι έγκυρη ή λείπει, το var()` θα πρέπει να αντικατασταθεί με τίποτα.

Ρυθμιστικό τυχαίου κύβου

Λίγη τυχαιότητα μπορεί να είναι μια ωραία βελτίωση για αυτού του είδους τα κινούμενα σχέδια. Έτσι, αντί να περιστρέψουμε τον κύβο με διαδοχική σειρά, μπορούμε να ρίξουμε τα ζάρια ούτως ή άλλως, και να αφήσουμε τον κύβο να κυλήσει όπως θέλει.

Cool σωστά; Δεν ξέρω για εσάς, αλλά αυτή η έκδοση μου αρέσει περισσότερο! Είναι πιο ενδιαφέρον και οι μεταβάσεις είναι ικανοποιητικές για παρακολούθηση. Και μάντεψε τι? Μπορείτε να παίξετε με τις τιμές για να δημιουργήσετε το δικό σας τυχαίο ρυθμιστικό κύβου!

Η λογική είναι πραγματική, δεν είναι καθόλου τυχαία - έτσι φαίνεται. Ορίζεις α transform σε κάθε βασικό καρέ που σας επιτρέπει να δείξετε ένα πρόσωπο και… λοιπόν, αυτό είναι πραγματικά! Μπορείτε να επιλέξετε όποια παραγγελία θέλετε.

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

χρησιμοποιώ rotate3d() αυτή τη φορά, αλλά εξακολουθώ να βασίζομαι στο DevTools για να βρω τις τιμές που μου φαίνονται «σωστές». Μην προσπαθήσετε να βρείτε μια σχέση μεταξύ των βασικών καρέ γιατί απλά δεν υπάρχει. Ορίζω ξεχωριστούς μετασχηματισμούς και μετά παρακολουθώ το «τυχαίο» αποτέλεσμα. Βεβαιωθείτε ότι η πρώτη εικόνα είναι το πρώτο και το τελευταίο καρέ, αντίστοιχα, και να εμφανίζεται διαφορετική εικόνα σε καθένα από τα άλλα καρέ.

Δεν είστε υποχρεωμένοι να χρησιμοποιήσετε α rotate3d() μεταμορφωθεί όπως έκανα. Μπορείτε επίσης να συνδέσετε διαφορετικές περιστροφές όπως κάναμε στο προηγούμενο παράδειγμα. Παίξτε και δείτε τι μπορείτε να βρείτε! Θα περιμένω να μοιραστείτε μαζί μου την εκδοχή σας στην ενότητα σχολίων!

Ολοκληρώνοντας

Ελπίζω να σας άρεσε αυτή η μικρή σειρά. Δημιουργήσαμε μερικά διασκεδαστικά (και αστεία) ρυθμιστικά ενώ μάθαμε πολλά για όλα τα είδη των εννοιών CSS στην πορεία — από την τοποθέτηση πλέγματος και τη σειρά στοίβαξης, έως τις καθυστερήσεις και τις μετατροπές κινούμενων εικόνων. Πήραμε ακόμη και να παίξουμε με μια παύλα Sass για να κάνουμε loop μέσα από μια σειρά στοιχείων.

Και τα κάναμε όλα με την ίδια ακριβώς HTML για κάθε ρυθμιστικό που φτιάξαμε. Πόσο ωραίο είναι αυτό; Το CSS είναι πολύ ισχυρό και ικανό να πετύχει τόσα πολλά χωρίς τη βοήθεια JavaScript.