CSS Infinite 3D drsniki

V tej seriji, smo izdelovali slikovne drsnike samo s HTML in CSS. Ideja je, da lahko uporabimo isto oznako, vendar drugačen CSS, da dobimo zelo različne rezultate, ne glede na to, koliko slik dodamo. Začeli smo s krožnim drsnikom, ki se neskončno vrti, nekako kot fidget spinner, ki drži slike. Nato smo naredili enega, ki prelista kup fotografij.

Tokrat se potapljamo v tretjo dimenzijo. Sprva se bo zdelo težko, vendar je veliko kode, ki jo gledamo, točno tisto, kar smo uporabili v prvih dveh člankih v tej seriji, z nekaj spremembami. Torej, če se šele zdaj spuščate v serijo, predlagam, da preverite druge za kontekst konceptov, ki jih tukaj uporabljamo.

To je tisto, na kar si prizadevamo:

Na prvi pogled je videti, kot da imamo vrtečo se kocko s štirimi slikami. Toda v resnici imamo opravka s skupno šestimi slikami. Tukaj je drsnik iz drugega zornega kota:

Zdaj, ko imamo dobro predstavo o tem, kako so slike razporejene, razčlenimo kodo, da vidimo, kako pridemo do tega.

Osnovna postavitev

Isti HTML kot ostali drsniki, ki smo jih uporabili za druge drsnike:

In še enkrat, uporabljamo CSS Grid, da postavimo slike v kup, eno na drugo:

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

Animacija

Logika tega drsnika je zelo podobna krožni drsnik iz prvega članka. Pravzaprav, če znova preverite zgornji videoposnetek, lahko vidite, da so slike postavljene tako, da ustvarjajo poligon. Po popolni rotaciji se vrne na prvo sliko.

Zanesli smo se na CSS transform-origin in animation-delay lastnosti za ta prvi drsnik. Ista animacija se uporabi za vse elemente slike, ki se vrtijo okoli iste točke. Nato z različnimi zakasnitvami vse slike pravilno postavimo okoli velikega kroga.

Implementacija bo nekoliko drugačna za naš 3D drsnik. Uporaba transform-origin tukaj ne bo delovalo, ker delamo v 3D, zato bomo uporabili transform namesto da pravilno postavite vse slike, nato zavrtite vsebnik.

Spet posegamo po Sassu, da lahko preletimo število slik in uporabimo naše transformacije:

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

Morda se sprašujete, zakaj skočimo naravnost v Sass. Začeli smo s fiksnim številom slik, ki smo uporabljali vanilije CSS v drugih člankih, preden smo posplošili kodo s Sassom, da bi upoštevali poljubno število (N) slik. No, mislim, da ste zdaj razumeli idejo in da lahko prekinemo vse to odkrivanje, da pridemo do prave izvedbe.

O transform Lastnost ima tri vrednosti, ki sem jih ponazoril tukaj:

Vse slike najprej zavrtimo eno nad drugo. Kot zasuka je odvisen od števila slik. Za N slike, imamo prirastek enak 360deg/N. Potem mi translate vse slike za enako količino na način, da se njihove središčne točke srečajo ob straneh.

Obstaja nekaj dolgočasne geometrije, ki pomaga razložiti, kako vse to deluje, vendar je razdalja enaka 50%/tan(180deg/N). S podobno enačbo smo imeli opravka pri izdelavi krožnega drsnika ( transform-origin: 50% 50%/sin(180deg/N) ).

Nazadnje slike zavrtimo okoli osi x za 90deg da dobimo želeno ureditev. Tu je videoposnetek, ki prikazuje, kaj počne zadnja rotacija:

Zdaj moramo samo zavrteti celotno posodo, da ustvarimo naš neskončni drsnik.

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

To kodo je morda težko razumeti, zato se dejansko za trenutek umaknimo in si ponovno ogledamo animacijo, ki smo jo naredili za krožni drsnik. To smo zapisali v prvem članku:

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

Ključni okvirji so skoraj enaki. Imamo enake odstotne vrednosti, enako zanko in enako rotacijo.

Zakaj sta oba enaka? Ker je njihova logika enaka. V obeh primerih so slike razporejene okoli krožne oblike in moramo celotno stvar zasukati, da prikažemo vsako sliko. Tako sem lahko kopiral ključne sličice iz krožnega drsnika in uporabil isto kodo za naš 3D drsnik. Edina razlika je v tem, da moramo posodo vrteti za -90deg vzdolž osi x, da vidimo slike, saj smo jih že zavrteli 90deg na isti osi. Nato dodamo pridih perspective da dobite 3D učinek.

To je to! Naš drsnik je končan. Tukaj je spet celoten demo. Vse, kar morate storiti, je, da dodate toliko slik, kot želite, in posodobite eno spremenljivko, da začnete delovati.

Navpični 3D drsnik

Ker se igramo v 3D prostoru, zakaj ne bi naredili navpične različice prejšnjega drsnika? Zadnja se vrti vzdolž osi z, po želji pa se lahko premikamo tudi vzdolž osi x.

Če primerjate kodo za obe različici tega drsnika, morda ne boste takoj opazili razlike, ker je le en znak! Zamenjal sem rotate() z rotateX() znotraj ključnih okvirjev in slike transform. To je to!

Treba je opozoriti, da rotate() ustreza rotateZ(), torej s spremembo osi iz Z do X preoblikujemo drsnik iz vodoravne različice v navpično.

Drsnik za kocke

Brez tega ne moremo govoriti o 3D v CSS govorimo o kockah. In ja, to pomeni, da bomo naredili drugo različico drsnika.

Ideja za to različico drsnika je ustvariti dejansko obliko kocke s slikami in zavrteti celotno stvar okoli druge osi. Ker gre za kocko, imamo opravka s šestimi ploskvami. Uporabili bomo šest slik, eno za vsako stran kocke. Torej, brez Sass, ampak nazaj k vaniljevemu CSS.

Ta animacija je malce presenetljiva, kajne? Kje sploh začneš?

Imamo šest obrazov, zato moramo izvesti vsaj šest zasukov, da se vsaka slika obrne. No, pravzaprav potrebujemo pet zasukov - zadnji nas pripelje nazaj na prvi obraz slike. Če zgrabite Rubikovo kocko — ali kakšen drug predmet v obliki kocke, kot je kocka — in jo zavrtite z roko, boste imeli dobro predstavo o tem, kaj počnemo.

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

O transform Lastnost se začne z ničelnimi rotacijami in vsakemu stanju dodamo novo rotacijo na določeni osi, dokler ne dosežemo šestih rotacij. Potem smo spet pri prvi sliki.

Ne pozabimo na postavitev naših slik. Vsak od njih se nanese na stran kocke z uporabo 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); }

Verjetno mislite, da je za vrednostmi, ki jih tam uporabljam, čudna zapletena logika, kajne? No, ne. Vse, kar sem naredil, je bilo, da sem odprl DevTools in se igral z različnimi vrednostmi vrtenja za vsako sliko, dokler mi ni uspelo. Morda se sliši neumno, ampak, hej, deluje – še posebej, ker imamo določeno število slik in ne iščemo nekaj, kar podpira N slik.

Pravzaprav pozabite na vrednosti, ki jih uporabljam, in poskusite umestitev narediti sami kot vajo. Začnite tako, da so vse slike zložene ena na drugo, odprite DevTools in pojdite! Verjetno boste na koncu dobili drugačno kodo in to je povsem v redu. Slike lahko postavite na različne načine.

V čem je trik z vejico znotraj var()? Ali gre za tipkarsko napako?

Ne gre za tipkarsko napako, zato je ne odstranjujte! Če ga odstranite, boste opazili, da vpliva na postavitev prve slike. To lahko vidite v moji kodi, ki sem jo definiral --_t za vse slike razen za prvo, ker samo zanjo rabim prevod. Zaradi te vejice se spremenljivka vrne na ničelno vrednost. Brez vejice ne bomo imeli nadomestne vrednosti in celotna vrednost bo neveljavna.

od specifikacijo:

Opomba: tj. var(--a,) je veljavna funkcija, ki določa, da če je --a lastnost po meri ni veljavna ali manjka, var()` zamenjati z nič.

Naključni drsnik za kocke

Malo naključnosti je lahko dobra izboljšava za to vrsto animacije. Torej, namesto da vrtimo kocko v zaporednem vrstnem redu, lahko tako rekoč vržemo kocko in pustimo, da se kocka kotali, kakor hoče.

Kul kajne? Ne vem za vas, ampak meni je ta različica bolj všeč! Je bolj zanimivo in prehodi so prijetni za gledanje. In ugani kaj? Igrate se lahko z vrednostmi, da ustvarite svoj naključni drsnik za kocke!

Logika je dejanska in sploh ni naključna - tako se samo zdi. Vi definirate a transform na vsaki ključni sličici, ki vam omogoča, da pokažete en obraz in ... no, to je res to! Izberete lahko poljubno naročilo.

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

Jaz sem z uporabo rotate3d() tokrat, vendar se še vedno zanašam na DevTools, da najdem vrednosti, ki se mi zdijo "prave". Ne poskušajte najti povezave med ključnimi sličicami, ker je preprosto ni. Definiram ločene transformacije in nato gledam "naključni" rezultat. Prepričajte se, da je prva slika prvi in ​​zadnji okvir, in prikažite drugo sliko na vsakem od drugih okvirjev.

Ni vam treba uporabiti a rotate3d() spremeniti, kot sem se jaz. Prav tako lahko verižite različne rotacije, kot smo storili v prejšnjem primeru. Igrajte se in poglejte, kaj si lahko izmislite! Čakal bom, da svojo različico delite z mano v oddelku za komentarje!

Zavijanje

Upam, da ste uživali v tej majhni seriji. Izdelali smo nekaj zabavnih (in smešnih) drsnikov, medtem ko smo se ob tem veliko naučili o vseh vrstah konceptov CSS – od postavitve mreže in vrstnega reda zlaganja do zakasnitev animacij in transformacij. Morali smo se celo poigrati s kančkom Sassa, da smo se pomikali po nizu elementov.

In vse smo naredili s povsem enakim HTML-jem za vsak drsnik, ki smo ga naredili. Kako kul je to? CSS je zelo zmogljiv in lahko doseže toliko brez pomoči JavaScripta.