Slider 3D Infinite CSS

Siri tutorial ini meneroka mewujudkan slider imej dinamik menggunakan hanya HTML dan CSS. Kami akan menunjukkan betapa pelbagai hasil dapat dicapai dengan markup yang konsisten dan gaya CSS yang bervariasi, tanpa mengira kiraan imej. Ansuran sebelumnya memaparkan gelangsar bulat, tak terhingga berputar dan slider gaya Polaroid yang membalikkan. Ansuran ini menyelidiki slider tiga dimensi. Walaupun pada mulanya kompleks, kebanyakan kod dibina atas contoh -contoh sebelumnya, dengan pengubahsuaian. Pendatang baru ke siri ini harus mengkaji artikel terdahulu untuk konteks asas.

ringkasan siri slider CSS

slider imej berputar bulat
membalikkan imej polaroid
slider 3D tak terhingga (artikel semasa)

Matlamat kami adalah untuk mencipta slider 3D yang menarik secara visual. Pada pandangan pertama, ia menyerupai kiub berputar yang memaparkan empat imej; Walau bagaimanapun, ia sebenarnya menggunakan enam imej yang diatur secara strategik. Melihat gelangsar dari perspektif yang berbeza mendedahkan susunan ini.

memahami susunan imej

Sekarang kita telah memvisualisasikan susunan imej, mari kita periksa kod.

Struktur Asas

HTML tetap konsisten dengan slider sebelumnya:

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

grid CSS digunakan untuk menyusun imej:

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

Pelaksanaan animasi

logik slider mencerminkan gelangsar bulat dari artikel pertama. Imej -imej itu membentuk poligon; Putaran lengkap kembali ke imej awal. Slider terdahulu digunakan

dan transform-origin. Slider 3D ini menggunakan animation-delay untuk kedudukan 3D dan kemudian memutar bekas. transform

sass digunakan untuk gelung melalui imej dan memohon transformasi:

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

harta menggunakan tiga nilai:

transform

putaran awal imej. Sudut bergantung pada kiraan imej (n), kenaikan sebanyak 360deg/n.

1. terjemahan untuk menyelaraskan mata pusat. Jarak dikira sebagai 50%/tan (180deg/n).
2. putaran di sekitar paksi-x (90deg) untuk susunan yang dikehendaki.
putaran kontena untuk gelung tak terhingga

Akhirnya, berputar bekas mencipta kesan slider tak terhingga:

Kerangka utama adalah serupa dengan gelangsar bulat, berputar bekas untuk memaparkan setiap imej. Pusingan paksi x -90deg mengimbangi putaran 90deg imej, dan perspektif menambah kesan 3D.

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

Variasi slider selanjutnya: slider menegak dan kubus

Artikel kemudian meneroka variasi: slider menegak (dicapai dengan menukar rotate() ke rotateX() dalam kerangka kunci dan transformasi imej) dan slider kiub (menggunakan enam imej dan putaran khusus untuk setiap muka). Animasi slider Cube lebih kompleks, memerlukan orkestrasi rotasi yang berhati -hati pada pelbagai paksi. Variasi slider kiub rawak juga dibentangkan, memperkenalkan putaran tidak berkesudahan untuk kesan yang lebih tidak dapat diramalkan.

Kesimpulan

Tutorial menyimpulkan dengan menonjolkan kuasa CSS dalam mewujudkan animasi kompleks dengan HTML dan JavaScript yang minimum. Siri ini menunjukkan kepelbagaian CSS untuk membina unsur -unsur interaktif dan visual yang menarik.

Atas ialah kandungan terperinci Slider 3D Infinite CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!