CSS Infinite 3D liugurid

Selles sarjas, oleme loonud pildiliugureid ainult HTML-i ja CSS-iga. Idee seisneb selles, et me saame kasutada sama märgistust, kuid erinevat CSS-i, et saada metsikult erinevaid tulemusi, olenemata sellest, kui palju pilte me sisse viskame. Alustasime ringikujulisest liugurist, mis pöörleb lõputult, omamoodi nagu nikerdaja, mis hoiab pilte. Seejärel tegime ühe, mis lehvitab fotode virna.

Seekord sukeldume kolmandasse dimensiooni. Alguses tundub see raske, kuid suur osa koodist, mida me vaatame, on täpselt see, mida kasutasime selle sarja kahes esimeses artiklis, mõningate muudatustega. Seega, kui te alles nüüd sarjaga tutvute, soovitan siin kasutatavate mõistete konteksti leidmiseks vaadata ka teisi.

See on see, mida me sihime:

Esmapilgul tundub, et meil on nelja pildiga pöörlev kuubik. Kuid tegelikult on meil kokku kuus pilti. Siin on liugur teise nurga alt:

Nüüd, kui meil on piltide paigutuse kohta hea visuaal, lahkame koodi, et näha, kuidas me sinna jõuame.

Põhiseade

Sama HTML mis ülejäänud liuguritel, mida oleme kasutanud teiste liugurite jaoks:

Ja veel kord, me kasutame piltide virna paigutamiseks üksteise peale CSS-võrku:

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

Animatsioon

Selle liuguri loogika on väga sarnane esimese artikli ringikujuline liugur. Tegelikult, kui vaatate ülaltoodud videot uuesti, näete, et pildid on paigutatud viisil, mis loob hulknurga. Pärast täielikku pööramist naaseb see esimesele pildile.

Me tuginesime CSS-ile transform-origin ja animation-delay selle esimese liuguri omadused. Kõigile sama punkti ümber pöörlevatele pildielementidele rakendatakse sama animatsiooni. Seejärel asetame erinevaid viiteid kasutades kõik pildid õigesti ümber suure ringi.

Rakendus on meie 3D-liuguri puhul pisut erinev. Kasutades transform-origin ei tööta siin, kuna töötame 3D-s, seega kasutame transform selle asemel, et kõik pildid õigesti paigutada, seejärel pöörake konteinerit.

Otsime uuesti Sassi poole, et saaksime piltide arvu läbi vaadata ja oma teisendusi rakendada:

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

Võib-olla mõtlete, miks me hüppame otse Sassi. Alustasime kindla arvu piltidega, kasutades vanilje CSS-i teistes artiklites, enne kui üldistasime koodi Sassiga, et arvestada mis tahes arvu (N) piltidest. Noh, ma arvan, et saate ideest nüüd aru ja me saame kogu selle avastustöö katkestada, et jõuda tegeliku teostuseni.

. transform atribuut võtab kolm väärtust, mida olen siin illustreerinud:

Kõigepealt pöörame kõik pildid üksteise kohal. Pöördenurk sõltub piltide arvust. Sest N pilte, meil on juurdekasv võrdne 360deg/N. Siis meie translate kõik pildid sama palju nii, et nende keskpunktid külgedel kohtuvad.

Seal on mõni igav geomeetria, mis aitab selgitada, kuidas see kõik toimib, kuid vahemaa on võrdne 50%/tan(180deg/N). Sarnase võrrandiga tegelesime ka ringikujulise liuguri ( transform-origin: 50% 50%/sin(180deg/N) ).

Lõpuks pöörame pilte ümber x-telje võrra 90deg et saada soovitud korraldus. Siin on video, mis illustreerib, mida viimane pöörlemine teeb:

Nüüd peame ainult kogu konteinerit pöörama, et luua meie lõpmatu liugur.

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

Seda koodi võib olla raske mõista, nii et astume hetkeks tagasi ja vaatame uuesti ringikujulise liuguri jaoks loodud animatsiooni. Seda me kirjutasime esimeses artiklis:

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

Võtmekaadrid on peaaegu identsed. Meil on samad protsendiväärtused, sama silmus ja sama pöörlemine.

Miks on mõlemad ühesugused? Sest nende loogika on sama. Mõlemal juhul on pildid paigutatud ringikujuliselt ja iga pildi kuvamiseks peame kogu asja pöörama. Nii sain kopeerida võtmekaadreid ringikujulisest liugurist ja kasutada sama koodi meie 3D-liuguri jaoks. Ainus erinevus on see, et me peame konteinerit pöörama -90deg piki x-telge, et näha pilte, kuna oleme neid juba pööranud 90deg samal teljel. Seejärel lisame puudutuse perspective 3D-efekti saamiseks.

See on kõik! Meie liugur on valmis. Siin on jälle täielik demo. Kõik, mida peate tegema, on lisada nii palju pilte, kui soovite, ja värskendada üht muutujat, et see toimiks.

Vertikaalne 3D liugur

Kuna me mängime 3D-ruumis, siis miks mitte teha eelmisest liugurist vertikaalne versioon? Viimane pöörleb mööda z-telge, kuid soovi korral saame liikuda ka mööda x-telge.

Kui võrrelda selle liuguri mõlema versiooni koodi, ei pruugi te erinevust kohe märgata, kuna see on ainult üks märk! vahetasin välja rotate() koos rotateX() võtmekaadrite ja pildi sees transform. See ongi!

Tuleb märkida, et rotate() on samaväärne rotateZ(), muutes telge alates Z et X muudame liuguri horisontaalsest versioonist vertikaalseks.

Kuubiku liugur

Me ei saa CSS-is ilma 3D-st rääkida kuubikutest rääkides. Ja jah, see tähendab, et teeme liugurist teise versiooni.

Selle liuguri versiooni idee on luua piltidega tegelik kuubikuju ja pöörata kogu asi ümber erineva telje. Kuna see on kuubik, on meil kuus nägu. Kasutame kuut pilti, ühte kuubi iga külje jaoks. Niisiis, mitte Sass, vaid tagasi vanilje CSS-i juurde.

See animatsioon on natuke ülekaalukas, eks? Kust sa üldse alustad?

Meil on kuus nägu, seega peame tegema vähemalt kuus pööret, et iga pilt saaks pöörde. Tegelikult on meil vaja viit pööret – viimane toob meid tagasi esimese pildinäo juurde. Kui haarate Rubiku kuubiku – või mõne muu kuubikukujulise eseme, näiteks täringud – ja pöörate seda käega, on teil hea ettekujutus meie tegemistest.

.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 omadus algab nullpööramisega ja igale olekule lisame kindlale teljele uue pöörde, kuni jõuame kuue pöördeni. Siis oleme tagasi esimese pildi juurde.

Ärgem unustagem oma piltide paigutust. Igaüks neist kantakse kuubi esiküljele kasutades 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); }

Tõenäoliselt arvate, et nende väärtuste taga, mida ma seal kasutan, on imelik keeruline loogika, eks? No ei. Kõik, mida ma tegin, oli avada DevTools ja mängida iga pildi jaoks erinevate pöörlemisväärtustega, kuni sain selle õigeks. See võib tunduda rumal, kuid hei, see töötab – eriti kuna meil on kindel arv pilte ja me ei otsi midagi, mis toetab N pilte.

Tegelikult unustage väärtused, mida ma kasutan, ja proovige paigutust harjutusena ise teha. Alustage sellest, et kõik pildid on üksteise peale virnastatud, avage DevTools ja minge! Tõenäoliselt saate erineva koodiga ja see on täiesti korras. Piltide paigutamiseks võib olla erinevaid viise.

Mis nipp sees oleva komaga on var()? Kas see on kirjaviga?

See ei ole kirjaviga, nii et ärge eemaldage seda! Kui eemaldate selle, märkate, et see mõjutab esimese pildi paigutust. Näete seda minu määratletud koodis --_t kõigi piltide jaoks, välja arvatud esimene, sest mul on vaja ainult selle jaoks tõlget. See koma muudab muutuja nullväärtuseks. Ilma komata ei ole meil tagavara ja kogu väärtus on kehtetu.

alates spetsifikatsioon:

Märkus: see tähendab, var(--a,) on kehtiv funktsioon, mis täpsustab, et kui --a kohandatud atribuut on kehtetu või puudub, var()` tuleks asendada mitte millegagi.

Juhuslik kuubiku liugur

Natuke juhuslikkust võib seda tüüpi animatsiooni jaoks kenasti täiustada. Seega, selle asemel, et kuubikut järjestikuses järjekorras pöörata, saame täringut nii-öelda veeretada ja lasta kuubil veereda, kuidas tahab.

Lahe eks? Ma ei tea kuidas teiega on, aga mulle meeldib see versioon rohkem! See on huvitavam ja üleminekuid on meeldiv vaadata. Ja arva ära mis? Saate väärtustega mängida, et luua oma juhuslik kuubiku liugur!

Loogika pole tegelikult üldse juhuslik - see lihtsalt näib nii. Te määratlete a transform igal võtmekaadril, mis võimaldab teil näidata ühte nägu ja… noh, see on tõesti kõik! Saate valida mis tahes soovitud tellimuse.

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

ma kasutan rotate3d() seekord, kuid toetun endiselt DevToolsile, et leida väärtused, mis mulle sobivad. Ärge püüdke leida võtmekaadrite vahel seost, sest seda lihtsalt pole. Ma defineerin eraldi teisendusi ja vaatan seejärel "juhuslikku" tulemust. Veenduge, et esimene pilt oleks vastavalt esimene ja viimane kaader, ning näidake igal teisel kaadril erinevat pilti.

Te ei ole kohustatud kasutama a rotate3d() muutuda nagu mina. Samuti saate aheldada erinevaid pöörlemisi, nagu tegime eelmises näites. Mängige ringi ja vaadake, mida saate välja mõelda! Ootan, et jagaksite oma versiooni minuga kommentaaride jaotises!

Pakke kuni

Loodan, et teile meeldis see väike sari. Ehitasime mõned lõbusad (ja naljakad) liugurid, õppides samal ajal palju erinevaid CSS-i kontseptsioone – alates ruudustiku paigutusest ja virnastamisjärjekorrast kuni animatsiooni viivituste ja teisendusteni. Saime isegi mängida killukese Sassiga, et liikuda läbi elementide massiivi.

Ja me tegime seda kõike täpselt sama HTML-iga iga tehtud liuguri jaoks. Kui lahe see on? CSS on väga võimas ja suudab ilma JavaScripti abita nii palju ära teha.