CSS Sonsuz 3D Kaydırıcılar

bu seride, HTML ve CSS'den başka hiçbir şey kullanmadan görüntü kaydırıcıları yapıyoruz. Buradaki fikir, ne kadar resim atarsak atalım, çılgınca farklı sonuçlar elde etmek için aynı işaretlemeyi ancak farklı CSS'yi kullanabileceğimizdir. Sonsuz dönen dairesel bir kaydırıcıyla başladık, görüntüleri tutan bir stres çarkı gibi. Sonra bir yığın fotoğraf arasında gezinen bir tane yaptık.

Bu sefer üçüncü boyuta dalıyoruz. İlk başta zor görünecek, ancak baktığımız kodun çoğu, bazı değişikliklerle birlikte bu dizinin ilk iki makalesinde kullandığımızla aynı. Dolayısıyla, diziye yeni başlıyorsanız, burada kullandığımız kavramlarla ilgili bağlam için diğerlerine göz atmanızı öneririm.

İşte bunu hedefliyoruz:

İlk bakışta, dört resimli dönen bir küpümüz var gibi görünüyor. Ama gerçekte, toplamda altı resimle uğraşıyoruz. İşte farklı bir açıdan kaydırıcı:

Artık görüntülerin nasıl düzenlendiğine dair iyi bir görselimiz olduğuna göre, oraya nasıl gittiğimizi görmek için kodu inceleyelim.

temel kurulum

Diğer kaydırıcılar için kullandığımız diğer kaydırıcılarla aynı HTML:

Ve bir kez daha, görüntüleri bir yığın halinde üst üste yerleştirmek için CSS Izgarasını kullanıyoruz:

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

Animasyon

Bu kaydırıcının mantığı şuna çok benzer: ilk makaledeki dairesel kaydırıcı. Hatta yukarıdaki videoyu tekrar kontrol ederseniz görüntülerin bir poligon oluşturacak şekilde yerleştirildiğini görebilirsiniz. Tam bir dönüşten sonra ilk görüntüye döner.

CSS'ye güvendik transform-origin ve animation-delay o ilk kaydırıcının özellikleri. Aynı animasyon, aynı nokta etrafında dönen tüm görüntü öğelerine uygulanır. Ardından, farklı gecikmeler kullanarak, tüm görüntüleri doğru bir şekilde büyük bir dairenin etrafına yerleştiriyoruz.

Uygulama, 3B kaydırıcımız için biraz farklı olacaktır. kullanma transform-origin 3 boyutlu çalıştığımız için burada çalışmaz, bu yüzden kullanacağız transform bunun yerine tüm görüntüleri doğru şekilde yerleştirmek için kabı döndürün.

Tekrar Sass'a ulaşıyoruz, böylece görüntü sayısı arasında dolaşabilir ve dönüşümlerimizi uygulayabiliriz:

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

Neden doğrudan Sass'a atladığımızı merak ediyor olabilirsiniz. Sass ile herhangi bir sayıyı (N) görüntüler. Sanırım şimdi fikri anladınız ve gerçek uygulamaya geçmek için tüm bu keşif çalışmalarını kesebiliriz.

The transform property, burada örneklendirdiğim üç değer alıyor:

Önce üst üste tüm resimleri döndürüyoruz. Döndürme açısı görüntü sayısına bağlıdır. İçin N görüntüler, şuna eşit bir artışımız var: 360deg/N. Bizden sonra translate tüm görüntüleri, merkez noktaları yanlarda birleşecek şekilde aynı miktarda çekin.

Tüm bunların nasıl çalıştığını açıklamaya yardımcı olan bazı sıkıcı geometriler var, ancak mesafe şuna eşittir: 50%/tan(180deg/N). Dairesel kaydırıcıyı yaparken benzer bir denklemle uğraştık ( transform-origin: 50% 50%/sin(180deg/N) ).

Son olarak, görüntüleri x ekseni etrafında şu şekilde döndürüyoruz: 90deg istediğimiz düzeni elde etmek için. İşte son dönüşün ne yaptığını gösteren bir video:

Şimdi tek yapmamız gereken, sonsuz kaydırıcımızı oluşturmak için tüm kabı döndürmek.

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

Bu kodu anlamak zor olabilir, bu yüzden bir an geri çekilelim ve dairesel kaydırıcı için yaptığımız animasyonu tekrar gözden geçirelim. İlk yazımızda şunu yazmıştık:

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

Anahtar kareler neredeyse aynıdır. Aynı yüzde değerlerine, aynı döngüye ve aynı dönüşe sahibiz.

Neden ikisi de aynı? Çünkü mantıkları aynı. Her iki durumda da, görüntüler dairesel bir şekil etrafında düzenlenir ve her bir görüntüyü göstermek için her şeyi döndürmemiz gerekir. Dairesel sürgüden anahtar kareleri bu şekilde kopyalayabildim ve aynı kodu 3B kaydırıcımız için kullanabildim. Tek fark, kabı döndürmemiz gerektiğidir. -90deg görüntüleri görmek için x ekseni boyunca, çünkü onları zaten döndürdük. 90deg aynı eksende. Sonra bir dokunuş ekliyoruz perspective 3D efekti elde etmek için.

Bu kadar! Kaydırıcımız bitti. İşte yine tam demo. Tek yapmanız gereken, istediğiniz kadar resim eklemek ve devam etmesi için bir değişkeni güncellemek.

Dikey 3B kaydırıcı

3B alanda oynadığımıza göre, neden önceki kaydırıcının dikey bir versiyonunu yapmıyoruz? Sonuncusu z ekseni boyunca dönüyor ama istersek x ekseni boyunca da hareket edebiliriz.

Bu kaydırıcının her iki sürümünün kodunu karşılaştırırsanız, yalnızca bir karakter olduğu için farkı hemen göremeyebilirsiniz! değiştirdim rotate() ile rotateX() anahtar karelerin ve görüntünün içinde transform. Bu kadar!

Bu unutulmamalıdır rotate() eşdeğerdir rotateZ(), yani ekseni değiştirerek Z için X kaydırıcıyı yatay sürümden dikey olana dönüştürüyoruz.

Küp kaydırıcı

Olmadan CSS'de 3D hakkında konuşamayız. küpler hakkında konuşmak. Ve evet, bu kaydırıcının başka bir versiyonunu yapacağımız anlamına geliyor.

Kaydırıcının bu sürümünün arkasındaki fikir, görüntülerle gerçek bir küp şekli oluşturmak ve tüm şeyi farklı eksen etrafında döndürmektir. Küp olduğu için altı yüzle uğraşıyoruz. Küpün her yüzü için bir tane olmak üzere altı resim kullanacağız. Yani, Sass yok ama vanilya CSS'ye geri dönelim.

Bu animasyon biraz ezici, değil mi? Nereden başlıyorsun?

Altı yüzümüz var, bu yüzden her görüntünün bir dönüş alması için en az altı dönüş yapmamız gerekiyor. Aslında, beş döndürmeye ihtiyacımız var - sonuncusu bizi ilk görüntü yüzüne geri getiriyor. Gidip bir Rubik Küpü veya zar gibi başka bir küp şeklindeki nesneyi alıp elinizle döndürürseniz, ne yaptığımız hakkında iyi bir fikir edinirsiniz.

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

The transform özellik sıfır dönüşle başlar ve her durumda, altı dönüşe ulaşana kadar belirli bir eksene yeni bir dönüş ekleriz. Ardından ilk görsele geri dönüyoruz.

Resimlerimizin yerleşimini unutmayalım. Her biri kullanılarak küpün bir yüzüne uygulanır. 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); }

Muhtemelen orada kullandığım değerlerin arkasında garip karmaşık bir mantık olduğunu düşünüyorsunuz, değil mi? Hayır. Tek yaptığım DevTools'u açmak ve doğru olana kadar her görüntü için farklı döndürme değerleri ile oynamaktı. Aptalca gelebilir ama hey, işe yarıyor — özellikle sabit sayıda görselimiz olduğundan ve destekleyen bir şey aramıyorsak N görüntüler.

Aslında kullandığım değerleri unutun ve yerleşimi bir egzersiz olarak kendi başınıza yapmaya çalışın. Tüm görüntüleri üst üste istifleyerek başlayın, DevTools'u açın ve başlayın! Muhtemelen farklı bir kodla sonuçlanacaksınız ve bu tamamen iyi. Görüntüleri konumlandırmanın farklı yolları olabilir.

İçindeki virgülle işin püf noktası nedir? var()? Bir yazım hatası mı?

Bu bir yazım hatası değil, bu yüzden kaldırmayın! Kaldırırsanız, ilk görüntünün yerleşimini etkilediğini fark edeceksiniz. Bunu tanımladığım kodumda görebilirsiniz --_t ilki hariç tüm resimler için çünkü sadece onun için bir çeviriye ihtiyacım var. Bu virgül, değişkenin boş bir değere geri dönmesine neden olur. Virgül olmadan geri dönüş olmaz ve tüm değer geçersiz olur.

Konum şartname:

Not: Yani, var(--a,) geçerli bir işlevdir ve eğer --a özel özellik geçersiz veya eksikse, var()` hiçbir şeyle değiştirilmelidir.

Rastgele küp kaydırıcı

Biraz rastgelelik, bu tür bir animasyon için güzel bir geliştirme olabilir. Böylece, küpü sırayla döndürmek yerine, tabiri caizse zarları atabilir ve küpün istediği gibi yuvarlanmasına izin verebiliriz.

Harika değil mi? Sizi bilmem ama ben bu versiyonu daha çok seviyorum! Daha ilginç ve geçişler izlemesi tatmin edici. Ve tahmin et ne oldu? Kendi rasgele küp kaydırıcınızı oluşturmak için değerlerle oynayabilirsiniz!

Mantık gerçek, hiç de rastgele değil - sadece öyle görünüyor. siz tanımlayın transform bir yüzü göstermenize izin veren her ana karede ve… şey, gerçekten bu kadar! İstediğiniz siparişi seçebilirsiniz.

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

Ben kullanıyorum rotate3d() bu sefer ama bana "doğru" gelen değerleri bulmak için hala DevTools'a güveniyorum. Anahtar kareler arasında bir ilişki bulmaya çalışmayın çünkü öyle bir ilişki yok. Ayrı dönüşümler tanımlıyorum ve ardından "rastgele" sonucu izliyorum. İlk görüntünün sırasıyla ilk ve son kare olduğundan emin olun ve diğer karelerin her birinde farklı bir görüntü gösterin.

kullanmak zorunda değilsiniz rotate3d() benim yaptığım gibi dönüştür. Önceki örnekte yaptığımız gibi farklı dönüşleri de zincirleyebilirsiniz. Etrafta oynayın ve neler bulabileceğinizi görün! Versiyonunuzu yorumlar kısmında benimle paylaşmanızı bekliyor olacağım!

Tamamlayan

Umarım bu küçük seriyi beğenmişsinizdir. Izgara yerleştirme ve yığınlama düzeninden animasyon gecikmeleri ve dönüştürmelere kadar her türden CSS kavramı hakkında çok şey öğrenirken eğlenceli (ve eğlenceli) kaydırıcılar oluşturduk. Hatta bir dizi öğe arasında döngü yapmak için bir tutam Sass ile oynamalıyız.

Ve yaptığımız her kaydırıcı için tamamen aynı HTML ile yaptık. Ne kadar serin? CSS çok güçlüdür ve JavaScript'in yardımı olmadan pek çok şeyi başarabilir.