CSS Infinite 3D -liukusäätimet

Tässä sarjassa, olemme tehneet kuvien liukusäätimiä vain HTML:n ja CSS:n avulla. Ajatuksena on, että voimme käyttää samaa merkintää, mutta eri CSS:ää saadaksemme hurjasti erilaisia ​​tuloksia, riippumatta siitä, kuinka monta kuvaa heitämme sisään. Aloitimme pyöreästä liukusäätimestä, joka pyörii äärettömästi, tavallaan kuin fidget spinner, joka pitää kuvia. Sitten teimme sellaisen, joka selaa valokuvapinon läpi.

Tällä kertaa sukeltamme kolmanteen ulottuvuuteen. Se näyttää aluksi vaikealta, mutta suuri osa tarkastelemastamme koodista on juuri sitä, mitä käytimme tämän sarjan kahdessa ensimmäisessä artikkelissa, muutamin muutoksin. Joten, jos olet vasta nyt pääsemässä sarjaan, suosittelen tarkistamaan muiden tässä käyttämiemme käsitteiden konteksti.

Tähän pyrimme:

Ensi silmäyksellä näyttää siltä, ​​​​että meillä on pyörivä kuutio, jossa on neljä kuvaa. Mutta todellisuudessa käsittelemme kaikkiaan kuutta kuvaa. Tässä liukusäädin eri kulmasta:

Nyt kun meillä on hyvä visuaalinen kuva siitä, miten kuvat on järjestetty, tarkastellaan koodia nähdäksemme, miten pääsemme sinne.

Perusasetukset

Sama HTML kuin muilla liukusäätimillä, joita olemme käyttäneet muille liukusäätimille:

Ja jälleen kerran, käytämme CSS Gridiä kuvien sijoittamiseen pinoon, päällekkäin:

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

Animaatio

Tämän liukusäätimen logiikka on hyvin samanlainen kuin pyöreä liukusäädin ensimmäisestä artikkelista. Itse asiassa, jos tarkistat yllä olevan videon uudelleen, voit nähdä, että kuvat on sijoitettu tavalla, joka luo monikulmion. Täyden kierron jälkeen se palaa ensimmäiseen kuvaan.

Luotimme CSS:ään transform-origin ja animation-delay ensimmäisen liukusäätimen ominaisuudet. Samaa animaatiota käytetään kaikkiin kuvaelementteihin, jotka pyörivät saman pisteen ympäri. Sitten eri viiveitä käyttämällä sijoitamme kaikki kuvat oikein suuren ympyrän ympärille.

Toteutus on hieman erilainen 3D-liukusäätimessämme. Käyttämällä transform-origin ei toimi täällä, koska työskentelemme 3D:ssä, joten käytämme transform sen sijaan sijoittaaksesi kaikki kuvat oikein, kierrä sitten säilöä.

Haemme jälleen Sassia, jotta voimme käydä läpi kuvien määrän ja soveltaa muunnoksiamme:

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

Saatat ihmetellä, miksi hyppäämme suoraan Sassiin. Aloitimme kiinteällä määrällä kuvia käyttämällä vanilja-CSS:ää muissa artikkeleissa ennen kuin yleistimme koodin Sassin kanssa minkä tahansa luvun (N) kuvista. No, luulen, että ymmärrät nyt idean ja voimme lopettaa kaiken sen löytötyön päästäksemme todelliseen toteutukseen.

- transform ominaisuus ottaa kolme arvoa, jotka olen havainnollistanut tässä:

Kierrämme ensin kaikki kuvat päällekkäin. Kääntökulma riippuu kuvien määrästä. varten N kuvia, meillä on lisäys yhtä suuri kuin 360deg/N. Sitten me translate kaikki kuvat samalla määrällä siten, että niiden keskipisteet kohtaavat sivuilla.

On olemassa tylsää geometriaa, joka auttaa selittämään, kuinka tämä kaikki toimii, mutta etäisyys on yhtä suuri 50%/tan(180deg/N). Käsittelimme samanlaista yhtälöä tehdessämme pyöreää liukusäädintä ( transform-origin: 50% 50%/sin(180deg/N) ).

Lopuksi käännämme kuvia x-akselin ympäri 90deg saadaksemme haluamamme järjestelyn. Tässä on video, joka havainnollistaa, mitä viimeinen kierto tekee:

Nyt meidän tarvitsee vain kiertää koko konttia luodaksemme äärettömän liukusäätimen.

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

Tätä koodia voi olla vaikea ymmärtää, joten siirrytään hetkeksi taaksepäin ja palataan animaatioon, jonka teimme pyöreälle liukusäätimelle. Tämän kirjoitimme ensimmäisessä artikkelissa:

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

Avainkehykset ovat lähes identtiset. Meillä on samat prosenttiarvot, sama silmukka ja sama kierto.

Miksi molemmat ovat samanlaisia? Koska heidän logiikkansa on sama. Molemmissa tapauksissa kuvat on järjestetty pyöreän muodon ympärille, ja meidän on käännettävä koko asia näyttääksemme jokaisen kuvan. Näin pystyin kopioimaan avainkehykset pyöreästä liukusäätimestä ja käyttämään samaa koodia 3D-liukusäätimessämme. Ainoa ero on, että meidän on käännettävä säiliötä -90deg x-akselia pitkin nähdäksesi kuvat, koska olemme jo kiertäneet niitä 90deg samalla akselilla. Sitten lisäämme ripauksen perspective saadaksesi 3D-efektin.

Se siitä! Liukusäätimemme on valmis. Tässä taas koko demo. Sinun tarvitsee vain lisätä niin monta kuvaa kuin haluat ja päivittää yksi muuttuja saadaksesi sen käyntiin.

Pysty 3D-liukusäädin

Koska pelaamme 3D-tilassa, miksi et tekisi pystysuoraa versiota edellisestä liukusäätimestä? Viimeinen pyörii z-akselia pitkin, mutta voimme halutessasi liikkua myös x-akselia pitkin.

Jos vertaat tämän liukusäätimen molempien versioiden koodia, et välttämättä huomaa eroa heti, koska se on vain yksi merkki! Vaihdoin rotate() with rotateX() avainkehysten ja kuvan sisällä transform. Se siitä!

On syytä huomata, että rotate() vastaa rotateZ(), joten vaihtamalla akselia Z että X muutamme liukusäätimen vaakaversiosta pystysuoraan.

Kuution liukusäädin

Emme voi puhua 3D:stä CSS:ssä ilman sitä kuutioista puhutaan. Ja kyllä, se tarkoittaa, että aiomme tehdä toisen version liukusäätimestä.

Tämän liukusäätimen version ideana on luoda kuvista todellinen kuution muoto ja kiertää koko asiaa eri akselin ympäri. Koska se on kuutio, käsittelemme kuusi kasvoa. Käytämme kuutta kuvaa, yhtä kuution jokaiselle pinnalle. Ei siis Sassia, vaan takaisin vanilja-CSS:ään.

Tuo animaatio on vähän ylivoimainen, eikö? Mistä edes aloitat?

Meillä on kuusi pintaa, joten meidän on suoritettava vähintään kuusi kiertoa, jotta jokainen kuva saa käännöksen. Itse asiassa tarvitsemme viisi kiertoa – viimeinen tuo meidät takaisin ensimmäiseen kuvan pintaan. Jos menet nappaamaan Rubikin kuution – tai jonkin muun kuution muotoisen esineen, kuten noppaa – ja pyörität sitä kädelläsi, saat hyvän käsityksen tekemisistämme.

.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 ominaisuus alkaa nollakierroksella ja jokaisessa tilassa lisäämme uuden kierroksen tietylle akselille, kunnes saavutamme kuusi kiertoa. Sitten palataan ensimmäiseen kuvaan.

Älä unohda kuviemme sijoittelua. Jokainen levitetään kuution pinnalle käyttämällä 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); }

Luultavasti ajattelet, että käyttämieni arvojen takana on outo monimutkainen logiikka, eikö niin? No ei. Tein vain avauksen DevToolsin ja leikin eri kiertoarvoilla jokaiselle kuvalle, kunnes sain sen oikein. Se voi kuulostaa tyhmältä, mutta hei, se toimii - varsinkin kun meillä on kiinteä määrä kuvia emmekä etsi jotain, joka tukee N kuvia.

Itse asiassa unohda käyttämäni arvot ja yritä tehdä sijoittelu itse harjoituksena. Aloita pinoamalla kaikki kuvat päällekkäin, avaa DevTools ja mene! Saatat todennäköisesti päätyä eri koodiin ja se on täysin kunnossa. Kuvien sijoittamiseen voi olla erilaisia ​​tapoja.

Mikä temppu on pilkun sisällä var()? Onko se kirjoitusvirhe?

Se ei ole kirjoitusvirhe, joten älä poista sitä! Jos poistat sen, huomaat sen vaikuttavan ensimmäisen kuvan sijoitukseen. Näet sen määrittämästäni koodista --_t kaikille kuville paitsi ensimmäistä, koska tarvitsen vain käännöksen. Tämä pilkku saa muuttujan putoamaan takaisin nolla-arvoon. Ilman pilkkua meillä ei ole varaa ja koko arvo on virheellinen.

alkaen eritelmä:

Huomautus: Eli var(--a,) on kelvollinen funktio, joka määrittää, että jos --a mukautettu ominaisuus on virheellinen tai puuttuu var()` pitäisi korvata millään.

Satunnainen kuution liukusäädin

Pieni satunnaisuus voi olla mukava lisä tällaiseen animaatioon. Joten sen sijaan, että pyöritämme kuutiota peräkkäisessä järjestyksessä, voimme heittää noppaa niin sanotusti ja antaa kuution rullata miten haluaa.

Siistiä eikö? En tiedä teistä, mutta pidän tästä versiosta enemmän! Se on mielenkiintoisempaa ja siirtymiä on miellyttävä seurata. Ja arvaa mitä? Voit leikkiä arvoilla luodaksesi oman satunnaisen kuution liukusäätimen!

Logiikka on todellinen, ei ollenkaan satunnainen - se vain näyttää siltä. Sinä määrittelet a transform jokaisessa avainkehyksessä, jonka avulla voit näyttää yhdet kasvot ja… no, siinä se todella on! Voit valita minkä tahansa tilauksen.

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

käytän rotate3d() tällä kertaa, mutta luotan edelleen DevToolsiin löytääkseni arvot, jotka tuntuvat "oikeilta". Älä yritä löytää suhdetta avainkehysten välillä, koska sellaista ei yksinkertaisesti ole. Määritän erilliset muunnokset ja katson sitten "satunnaista" tulosta. Varmista, että ensimmäinen kuva on ensimmäinen ja viimeinen ruutu, ja näytä eri kuva kussakin muussa kehyksessä.

Sinulla ei ole velvollisuutta käyttää a rotate3d() muuttaa kuten minä tein. Voit myös ketjuttaa eri kierroksia kuten teimme edellisessä esimerkissä. Pelaa ympäriinsä ja katso, mitä voit keksiä! Odotan, että jaat versiosi kanssani kommenttiosiossa!

Käärimistä

Toivottavasti pidit tästä pienestä sarjasta. Rakensimme hauskoja (ja hauskoja) liukusäätimiä samalla, kun opimme matkan varrella paljon kaikenlaisista CSS-konsepteista – ruudukon sijoittelusta ja pinoamisjärjestyksestä animaatioviiveisiin ja muunnoksiin. Saimme jopa pelata ripauksella Sass-silmukkaa elementtien joukon läpi.

Ja teimme kaiken täsmälleen samalla HTML-koodilla jokaiselle tekemällemme liukusäätimelle. Kuinka siistiä? CSS on erittäin tehokas ja pystyy saavuttamaan niin paljon ilman JavaScriptin apua.