CSS Infinite 3D csúszkák

Ebben a sorozatban, képcsúszkákat készítettünk HTML-en és CSS-en kívül. Az ötlet az, hogy ugyanazt a jelölést, de különböző CSS-t használhatjuk, hogy vadul eltérő eredményeket kapjunk, függetlenül attól, hogy hány képet dobunk be. Egy kör alakú csúszkával kezdtük, amely végtelenül forog, amolyan izgul pörgetéshez, amely képeket tartalmaz. Aztán készítettünk egyet, amiben egy rakás fotót lapozgattunk.

Ezúttal a harmadik dimenzióba merülünk. Elsőre nehéznek fog tűnni, de az általunk vizsgált kód nagy része pontosan az, amit a sorozat első két cikkében használtunk, némi módosítással. Tehát, ha csak most kezd bele a sorozatba, azt javaslom, hogy nézze meg a többit az itt használt fogalmak összefüggéseiért.

Erre törekszünk:

Első pillantásra úgy tűnik, hogy van egy forgó kockánk négy képpel. De a valóságban összesen hat képpel állunk szemben. Íme a csúszka más szögből:

Most, hogy van egy jó képünk a képek elrendezéséről, boncolgassuk a kódot, hogy lássuk, hogyan jutunk el oda.

Az alapbeállítás

Ugyanaz a HTML, mint a többi csúszka, amelyet a többi csúszkához használtunk:

És ismét a CSS Grid segítségével helyezzük el a képeket egy verembe, egymásra:

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

Az animáció

Ennek a csúszkának a logikája nagyon hasonló a a kör alakú csúszkát az első cikkből. Valójában, ha újra megnézi a fenti videót, láthatja, hogy a képek úgy vannak elhelyezve, hogy sokszöget hozzon létre. A teljes elforgatás után visszatér az első képhez.

A CSS-re hagyatkoztunk transform-origin és a animation-delay tulajdonságait az első csúszkához. Ugyanaz az animáció minden képelemre vonatkozik, amelyek ugyanazon pont körül forognak. Ezután különböző késleltetésekkel helyesen helyezzük el az összes képet egy nagy kör köré.

A megvalósítás kicsit más lesz a 3D csúszkánk esetében. Használata transform-origin itt nem fog működni, mert 3D-ben dolgozunk, ezért használni fogjuk transform ehelyett az összes kép helyes elhelyezéséhez, majd forgassa el a tárolót.

Újra Sass-hoz nyúlunk, hogy végignézhessük a képek számát, és alkalmazhassuk a transzformációinkat:

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

Talán azon tűnődsz, miért ugrunk közvetlenül Sassba. A többi cikkben rögzített számú képpel kezdtük a vanília CSS-t, mielőtt a kódot Sass-szal általánosítottuk, hogy bármilyen számot figyelembe vegyen (N) a képekből. Nos, azt hiszem, most már érted az ötletet, és megszakíthatjuk azt a felfedezési munkát, hogy elérjük a valódi megvalósítást.

A transform A tulajdonság három értéket vesz fel, amelyeket itt illusztráltam:

Először az összes képet egymás fölé forgatjuk. Az elforgatási szög a képek számától függ. Mert N képekkel egyenlő növekményünk van 360deg/N. Aztán mi translate az összes képet azonos mértékben úgy, hogy a középpontjuk az oldalakon találkozzon.

Van néhány unalmas geometria, amely segít elmagyarázni, hogyan működik mindez, de a távolság egyenlő 50%/tan(180deg/N). Hasonló egyenlettel foglalkoztunk a kör alakú csúszka ( transform-origin: 50% 50%/sin(180deg/N) ).

Végül elforgatjuk a képeket az x tengely körül 90deg hogy megkapjuk a kívánt elrendezést. Íme egy videó, amely bemutatja, mit csinál az utolsó forgatás:

Most már csak el kell forgatnunk az egész tárolót, hogy létrehozzuk a végtelen csúszkánkat.

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

Ezt a kódot nehéz lehet megérteni, ezért ugorjunk vissza egy pillanatra, és nézzük meg újra a kör alakú csúszkához készített animációt. Ezt írtuk az első cikkben:

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

A kulcskockák szinte azonosak. Ugyanazok a százalékértékeink, ugyanaz a hurok és ugyanaz a forgás.

Miért ugyanaz a kettő? Mert a logikájuk ugyanaz. Mindkét esetben a képek kör alakban vannak elrendezve, és az egészet el kell forgatnunk az egyes képek megjelenítéséhez. Így tudtam másolni a kulcskockákat a kör alakú csúszkáról, és ugyanazt a kódot használni a 3D csúszkánkhoz. Az egyetlen különbség az, hogy el kell forgatnunk a tartályt -90deg az x tengely mentén a képek megtekintéséhez, mivel már elforgattuk őket 90deg ugyanazon a tengelyen. Ezután adunk hozzá egy csipetnyit perspective a 3D hatás eléréséhez.

Ez az! A csúszkánk elkészült. Ismét itt a teljes demó. Mindössze annyit kell tennie, hogy annyi képet ad hozzá, amennyit csak szeretne, és frissítenie kell egy változót, hogy elinduljon.

Függőleges 3D csúszka

Mivel a 3D-s térben játszunk, miért nem készítjük el az előző csúszka függőleges változatát? Az utolsó a z tengely mentén forog, de ha akarunk, az x tengely mentén is mozoghatunk.

Ha összehasonlítja a csúszka mindkét verziójának kódját, előfordulhat, hogy nem fogja azonnal észrevenni a különbséget, mert ez csak egy karakter! kicseréltem rotate() val vel rotateX() a kulcskockákon és a képen belül transform. Ez az!

Meg kell jegyezni, hogy a rotate() egyenértékű rotateZ(), tehát a tengely megváltoztatásával Z nak nek X a csúszkát a vízszintes változatból függőlegesbe alakítjuk.

Kocka csúszka

Enélkül nem beszélhetünk 3D-ről a CSS-ben kockákról beszélünk. És igen, ez azt jelenti, hogy elkészítjük a csúszka egy másik verzióját.

A csúszka ezen verziója mögött az az ötlet, hogy valódi kockaformát hozzanak létre a képekkel, és a teljes dolgot elforgatják a különböző tengelyek körül. Mivel ez egy kocka, hat arccal van dolgunk. Hat képet fogunk használni, egyet a kocka minden lapjához. Tehát nem Sass, hanem vissza a vanília CSS-hez.

Ez az animáció egy kicsit lehengerlő, igaz? Egyáltalán hol kezded?

Hat arcunk van, tehát legalább hat elforgatást kell végrehajtanunk, hogy minden kép fordulatot kapjon. Nos, valójában öt forgatásra van szükségünk – az utolsó visszavezet minket az első képarchoz. Ha megragad egy Rubik-kockát – vagy valamilyen más kocka alakú tárgyat, például kockát – és elforgatja a kezével, akkor jó ötlete lesz, hogy mit csinálunk.

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

A transform A tulajdonság nulla elforgatással kezdődik, és minden állapothoz hozzáfűzünk egy új elforgatást egy adott tengelyhez, amíg el nem érjük a hat forgást. Aztán visszatérünk az első képhez.

Ne feledkezzünk meg képeink elhelyezéséről sem. Mindegyiket a kocka egyik lapjára alkalmazzák a segítségével 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); }

Valószínűleg arra gondol, hogy az általam használt értékek mögött furcsa összetett logika rejlik, igaz? Hát nem. Csak annyit tettem, hogy megnyitottam a DevTools-t, és minden egyes képhez más-más elforgatási értékkel játszottam, amíg meg nem értem. Lehet, hogy hülyén hangzik, de működik – különösen azért, mert fix számú képünk van, és nem keresünk valamit, ami támogatja N képeket.

Valójában felejtse el az általam használt értékeket, és próbálja meg gyakorlatként egyedül elvégezni az elhelyezést. Kezdje az összes kép egymásra helyezésével, nyissa meg a DevTools-t, és menjen! Valószínűleg más kódot fog kapni, és ez teljesen rendben van. A képek elhelyezésének többféle módja is lehet.

Mi a trükk a belsejében lévő vesszővel var()? Ez elírás?

Ez nem elírási hiba, ezért ne távolítsa el! Ha eltávolítja, észre fogja venni, hogy ez befolyásolja az első kép elhelyezését. Ezt láthatod az általam meghatározott kódomban --_t az első kivételével az összes képhez, mert csak fordításra van szükségem. Ettől a vesszőtől a változó nulla értékre esik vissza. Vessző nélkül nem lesz tartalékunk, és az egész érték érvénytelen lesz.

Tól től a specifikációt:

Megjegyzés: Azaz var(--a,) egy érvényes függvény, megadva, hogy ha a --a az egyéni tulajdonság érvénytelen vagy hiányzik, a var()` helyett semmire kell lépni.

Véletlenszerű kocka csúszka

Egy kis véletlenszerűség kellemes továbbfejlesztés lehet az ilyen típusú animációkhoz. Tehát ahelyett, hogy sorrendben forgatnánk a kockát, úgymond dobhatunk a kockával, és hagyhatjuk, hogy a kocka úgy guruljon, ahogy akar.

Menő ugye? Nem tudom ti hogy vagytok vele, de nekem ez a verzió jobban tetszik! Érdekesebb, az átmeneteket pedig kellemes nézni. És képzeld csak? Az értékekkel játszva létrehozhatja saját véletlenszerű kocka csúszkáját!

A logika valójában nem véletlenszerű – csak úgy tűnik. Ön meghatározza a transform minden kulcskockán, amely lehetővé teszi, hogy egy arcot mutasson, és… nos, ez tényleg az! Bármilyen rendelést választhat.

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

használom rotate3d() ezúttal, de továbbra is a DevToolsra hagyatkozom, hogy megtaláljam a számomra „helyesnek” tűnő értékeket. Ne próbáljon kapcsolatot találni a kulcskockák között, mert egyszerűen nincs. Külön transzformációkat határozok meg, majd figyelem a „véletlenszerű” eredményt. Győződjön meg arról, hogy az első kép az első és az utolsó képkocka, és a többi képkockán más-más képet jelenítsen meg.

Nem köteles használni a rotate3d() átalakulni, ahogy én tettem. Különböző forgatásokat is láncolhat, mint az előző példában. Játsszon, és nézze meg, mit tud kitalálni! Várom, hogy megoszthasd velem a verziódat a megjegyzés rovatban!

Csomagolta

Remélem tetszett ez a kis sorozat. Készítettünk néhány szórakoztató (és vicces) csúszkát, miközben rengeteget tanultunk a CSS-fogalmak minden fajtájáról – a rácselhelyezéstől és a halmozási sorrendtől az animációs késésekig és átalakításokig. Még egy csipet Sass-szal is játszanunk kellett, hogy végigfuthassunk egy sor elemen.

És mindezt pontosan ugyanazzal a HTML-kóddal csináltuk minden egyes csúszkánál. Milyen menő ez? A CSS rendkívül erős, és sok mindenre képes JavaScript segítsége nélkül.