Membina karusel berputar 3D dengan CSS dan JavaScript

Bina karusel berputar 3D interaktif, menggunakan transformasi 3D CSS dan JavaScript untuk meningkatkan paparan dinamik imej web atau kandungan. Artikel ini akan membimbing anda langkah demi langkah bagaimana membuat komponen ini.

Apabila saya mula -mula mempelajari topik ini, saya tidak memerlukan karusel 3D, tetapi memberi perhatian lebih kepada butiran pelaksanaannya yang spesifik. Teknologi teras tentu saja dari CSS mengubah modul tahap 1, tetapi dalam proses itu, banyak teknologi pembangunan front-end lain akan digunakan, yang melibatkan semua aspek CSS, SASS dan JavaScript klien.

Codepen ini menunjukkan versi komponen yang berbeza dan saya akan menunjukkan kepada anda bagaimana untuk membinanya.

Untuk menggambarkan tetapan untuk penukaran CSS 3D, saya akan menunjukkan kepada anda versi CSS tulen komponen. Saya kemudian akan menunjukkan kepada anda bagaimana untuk meningkatkannya menggunakan JavaScript untuk membangunkan skrip komponen mudah.

mata utama

Buat karusel berputar 3D interaktif menggunakan transformasi 3D CSS dan JavaScript untuk memaparkan imej atau kandungan lebih dinamik pada laman web.
Membina karusel dengan mengatur imej dalam ruang 3D bulat, menggunakan perkiraan poligon berdasarkan bilangan imej, dan mengawal penglihatan dan navigasi melalui peningkatan JavaScript.
Reka bentuk adaptif graf karusel dicapai dengan menggunakan pertanyaan media dan saiz berasaskan peratusan dalam CSS, memastikan ia dapat menyesuaikan diri dengan saiz skrin dan orientasi peranti yang berbeza.
Tambah kawalan navigasi melalui HTML dan JavaScript untuk meningkatkan interaksi pengguna, yang membolehkan pengguna untuk gelung secara manual melalui item peta karusel.
Terokai pilihan penyesuaian lanjutan seperti autoplay, kesan peralihan, gelung tak terhingga, dan menambah teks atau bentuk yang berbeza, menyediakan pilihan penyesuaian fleksibel untuk memenuhi keperluan reka bentuk tertentu.

tanda carta aksara

Untuk markup, imej di dalam komponen dibalut dengan elemen

, yang menyediakan rangka asas: <figure></figure>

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

Ini akan menjadi titik permulaan kami.

Struktur geometri angka karusel

Sebelum melihat CSS, mari menggariskan rancangan yang akan dibangunkan di bahagian berikut.

Oleh itu, bilangan poligon ini adalah sama dengan bilangan gambar dalam gambarajah karusel: Poligon tiga imej adalah segitiga yang sama; <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151412585.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript "> Bagaimana jika terdapat kurang daripada tiga imej dalam karusel? Poligon tidak boleh ditakrifkan dan proses berikut tidak boleh digunakan seperti yang ada. Dalam apa jua keadaan, ia tidak berguna untuk mempunyai hanya satu imej; Untuk kesederhanaan, kes -kes khas ini tidak dikendalikan dan mengandaikan bahawa terdapat sekurang -kurangnya tiga imej. Walau bagaimanapun, pengubahsuaian kod yang berkaitan tidak sukar.

Polygon rujukan khayalan ini akan terletak di ruang 3D, tegak lurus ke satah viewport, dan menolak pusatnya ke arah skrin, jarak sama dengan jarak tengahnya (jarak dari satu tepi poligon ke pusatnya) , seperti yang ditunjukkan dalam angka di bawah menunjukkan:

Dengan cara ini, kelebihan berorientasikan penonton semasa akan berada di pesawat skrin z = 0, manakala imej depan tidak akan dipengaruhi oleh pemendekan perspektif dan akan mempunyai saiz 2D yang normal. Surat D dalam gambar mewakili nilai atribut perspektif CSS.

Bina struktur geometri graf karusel

Dalam bahagian ini, saya akan menunjukkan kepada anda peraturan CSS utama, yang akan saya jelaskan langkah demi langkah.

Dalam coretan kod berikut, gunakan beberapa pembolehubah SASS untuk menjadikan komponen lebih mudah untuk mengkonfigurasi. Saya akan menggunakan

untuk mewakili bilangan imej dalam karusel dan gunakan $n untuk menentukan lebar imej. $item-width Elemen

adalah kotak inklusi imej pertama dan juga elemen rujukan di mana imej -imej lain diposisikan dan diubah. Dengan mengandaikan bahawa karusel kini hanya mempunyai satu imej untuk ditunjukkan, saya boleh mulakan dengan saiz dan penjajaran: <figure></figure>

Unsur -unsur

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

mempunyai lebar item karusel yang ditetapkan dan mempunyai ketinggian yang sama seperti imej (mereka boleh mempunyai saiz yang berbeza, tetapi mesti mempunyai nisbah aspek yang sama). Dengan cara ini, ketinggian kontena Carousel akan diselaraskan secara automatik mengikut ketinggian imej. Juga, <figure></figure> berpusat secara mendatar dalam bekas karusel. <figure></figure>

Imej pertama tidak memerlukan penukaran tambahan kerana ia sudah berada dalam kedudukan sasarannya, iaitu bahagian depan karusel.

boleh memutar karusel dalam ruang 3D dengan menggunakan transformasi putaran ke elemen

. Putaran ini mestilah di sekitar pusat poligon, jadi saya akan menukar transformasi angka lalai <figure></figure>: <figure></figure>

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Nilai ini terbalik kerana dalam CSS arah positif paksi z adalah untuk meninggalkan skrin dan menghadapi penonton. Kurungan diperlukan untuk mengelakkan kesilapan sintaks SASS. Pengiraan jarak payung poligon akan dijelaskan kemudian.

Setelah menukar sistem rujukan elemen

, seluruh karusel boleh diputar oleh putaran paksi y (baru): <figure></figure>

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

Saya akan mengembalikan butiran putaran ini kemudian.

mari kita terus menukar imej lain. Menggunakan kedudukan mutlak, imej disusun di dalam

: <figure></figure>

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

nilai z-indeks diabaikan kerana ini hanya langkah awal dalam penukaran berikutnya. Malah, setiap imej kini boleh memutar sudut di sekeliling paksi y imej karusel, yang bergantung kepada tepi poligonal imej yang ditetapkan. Pertama, seperti elemen

, ubah suai transformasi lalai imej dan gerakkannya ke pusat poligon: <figure></figure>

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

Imej kemudian boleh memutar kuantiti mengenai paksi Y yang baru, yang diberikan oleh ($i - 1) * $theta radians, di mana $i adalah indeks imej (bermula dari 1), $theta = 2 * $PI / $n, di mana $PI bermaksud π pemalar matematik. Jadi imej kedua akan berputar $theta, yang ketiga akan berputar 2 * $theta, dan sebagainya sehingga imej terakhir akan berputar ($n - 1) * $theta.

Oleh kerana sifat hierarki transformasi CSS bersarang, susunan imej relatif ini akan dipelihara semasa putaran peta karusel (iaitu, putaran mengenai paksi Y yang diubahsuai

). <figure></figure>

Jumlah putaran imej ini boleh diberikan menggunakan perintah kawalan SASS

: @for

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Ini menggunakan struktur

dan bukannya for...through, kerana untuk for...to, nilai terakhir yang diberikan kepada pembolehubah indeks for...to akan menjadi n-1 dan bukannya n. $i

Nota dua contoh sintaks interpolasi Sass '

. Dalam contoh pertama, ia digunakan untuk mengindeks pemilih #{}; :nth-child()

Kirakan jarak paracentric Pengiraan jarak paracentric dari poligon

bergantung kepada bilangan tepi dan lebar tepi, iaitu,

dan $n pembolehubah. Formula adalah: $item-width

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

di mana

adalah fungsi trigonometri tangen. tan()

Formula ini boleh diperolehi melalui beberapa geometri dan trigonometri. Dalam kod sumber pena, formula ini tidak dilaksanakan seperti kerana fungsi tangen tidak tersedia di SASS, jadi nilai keras digunakan. Sebaliknya, formula akan dilaksanakan sepenuhnya dalam demonstrasi JavaScript.

Item Carousel Interval

Pada ketika ini, imej karusel adalah "dijahit" bersebelahan untuk membentuk bentuk poligon yang dikehendaki. Tetapi di sini, mereka ditumpuk dengan ketat, dan dalam karusel 3D, biasanya terdapat ruang di antara mereka. Jarak ini meningkatkan persepsi ruang 3D kerana ia membolehkan anda melihat imej dengan belakang menghadap belakang karusel.

Jurang antara imej ini boleh ditambah dengan memperkenalkan pemboleh ubah konfigurasi lain

dan menggunakannya sebagai mengisi mendatar untuk setiap elemen $item-separation. Lebih tepat lagi, ambil separuh daripada nilai ini sebagai isi kiri dan kanan: <img alt="Membina karusel berputar 3D dengan CSS dan JavaScript" >

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

Hasil akhir dapat dilihat dalam demonstrasi berikut: (pautan codepen harus dimasukkan di sini untuk menunjukkan item karusel selang)

Imej

menjadi lut menggunakan atribut

untuk lebih menggambarkan struktur karusel, dan susun atur flex pada elemen akar karusel digunakan untuk memusatkannya secara menegak dalam pandangan. opacity

Gambar karusel putaran

Untuk memudahkan ujian giliran imej karusel, saya akan menambah kawalan UI untuk menavigasi ke belakang antara imej. (Pautan codepen harus dimasukkan di sini untuk memaparkan imej karusel berputar)

Kami menggunakan pembolehubah integer currImage untuk menunjukkan imej mana yang ada di hadapan karusel. Pembolehubah ini meningkat atau berkurangan sebanyak satu unit apabila pengguna berinteraksi dengan butang sebelumnya/seterusnya.

Selepas

kemas kini currImage, putaran imej karusel akan dilakukan dengan cara berikut:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

(di sini dan dalam coretan kod berikut, masukkan ekspresi ke dalam rentetan menggunakan literal template ES6; Jika anda lebih suka, anda boleh menggunakan pengendali concatenation "tradisional)

di mana theta sama seperti sebelum ini:

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

putaran adalah -theta kerana untuk menavigasi ke item seterusnya, putaran berlawanan arah berlawanan diperlukan dan nilai putaran ini negatif dalam penukaran CSS.

Sila ambil perhatian bahawa nilai currImage tidak terhad kepada julat [0, numImages – 1], tetapi boleh tumbuh tak terhingga, baik dalam arah positif dan negatif. Sebenarnya, jika imej depan adalah yang terakhir (SO currImage == n-1) dan pengguna mengklik butang seterusnya, jika kita menetapkan semula currImage hingga 0 sebelum imej karusel pertama, sudut putaran akan dari (n-1)*theta ditukar ke 0 , yang akan memutar karusel ke arah yang bertentangan pada semua imej sebelumnya. Masalah yang sama berlaku apabila butang sebelumnya diklik jika imej depan adalah yang pertama.

Untuk menjadi pemilih, saya juga perlu menyemak potensi limpahan currentImage, kerana jenis data Number tidak boleh mengambil nilai sewenang -wenangnya. Pemeriksaan ini tidak dilaksanakan dalam kod demo.

dipertingkatkan dengan JavaScript

Setelah melihat CSS asas yang membentuk teras graf karusel, kini mungkin untuk meningkatkan komponen dalam pelbagai cara menggunakan JavaScript, seperti:

• Bilangan gambar
• Peratus lebar Imej
Contoh Pelbagai Carousel pada halaman
Konfigurasi setiap contoh, seperti saiz jurang dan penglihatan belakang
Konfigurasi Menggunakan HTML5 Data-* Atribut

Pertama, saya mengeluarkan pembolehubah dan peraturan yang berkaitan dengan penukaran asal dan putaran dari lembaran gaya, kerana ini akan dilakukan menggunakan JavaScript: (kod CSS yang dikemas kini harus dimasukkan di sini)

Seterusnya, fungsi

dalam skrip bertanggungjawab untuk memulakan contoh: carousel()

Parameter

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

merujuk kepada elemen DOM yang menjimatkan gambarajah karusel. root

Biasanya, fungsi ini akan menjadi pembina yang menghasilkan objek untuk setiap graf karusel pada halaman, tetapi di sini saya tidak menulis perpustakaan karusel, jadi fungsi mudah akan mencukupi.

Untuk meniru pelbagai komponen pada halaman yang sama, kod menunggu semua imej untuk memuatkan, mendaftarkan pendengar untuk acara

untuk objek window, dan kemudian memanggil load untuk setiap elemen dengan carousel kelas carousel():

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

carousel() Lakukan tiga tugas utama:

• Tetapan navigasi. Ini adalah kod yang sama seperti yang diterangkan dalam demonstrasi codepen kedua.
• Tukar Tetapan
• Pendaftaran tetingkap saiz semula pendengar untuk menyimpan graf karusel menyesuaikan diri untuk menyesuaikannya dengan saiz viewport baru

Sebelum menyemak kod tetapan penukaran, saya akan merangkumi beberapa pembolehubah utama dan bagaimana untuk memulakannya berdasarkan konfigurasi contoh:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

Bilangan imej (n) diasaskan mengikut bilangan elemen kanak -kanak <figure></figure> elemen. Jarak antara slaid (jurang) diasaskan dari harta HTML5 data-gap (jika ditetapkan). Bendera penglihatan belakang (BFC) dibaca menggunakan API HTML5's dataset. Ini akan digunakan kemudian untuk menentukan sama ada imej di belakang karusel dapat dilihat.

Tetapkan penukaran CSS

Kod untuk menetapkan atribut berkaitan penukaran CSS dikemas dalam setupCarousel(). Fungsi bersarang ini mempunyai dua parameter. Yang pertama ialah bilangan item dalam graf karusel, iaitu, pembolehubah N yang diperkenalkan di atas. Parameter kedua adalah panjang sampingan poligon karusel. Seperti yang saya nyatakan sebelum ini, ini sama dengan lebar imej, jadi anda boleh membaca lebar semasa salah satu daripada mereka menggunakan getComputedStyle():

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Dengan cara ini, lebar imej boleh ditetapkan menggunakan nilai peratusan.

Untuk memastikan graf karusel menyesuaikan diri, saya mendaftarkan pendengar untuk acara saiz semula tetingkap, yang sekali lagi memanggil dengan (mungkin diubahsuai) saiz imej setupCarousel():

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

Untuk kesederhanaan, saya tidak menyiapkan saiz semula pendengar.

setupCarousel() Perkara pertama yang saya lakukan adalah untuk mengira jarak paracentric poligon menggunakan parameter yang diluluskan dan formula yang dibincangkan lebih awal:

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

Nilai ini kemudian digunakan untuk mengubah suai <figure></figure> unsur transform-origin untuk mendapatkan paksi putaran baru karusel:

.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}

Seterusnya, gunakan gaya imej:

.img:not(:first-of-type) {
  transform-origin: 50% 50% (-$apothem);
}

gelung pertama memperuntukkan padding untuk ruang antara barangan karusel. Gelung kedua menetapkan penukaran 3D. Gelung terakhir mengendalikan bahagian belakang jika bendera yang berkaitan ditentukan dalam konfigurasi gambarajah Carousel.

Akhirnya, hubungi rotateCarousel() untuk memindahkan imej semasa ke hadapan. Ini adalah fungsi pembantu kecil, memandangkan indeks imej yang akan dipaparkan, ia berputar elemen <figure></figure> tentang paksi-y untuk memindahkan imej sasaran ke bahagian depan. Kod navigasi juga menggunakannya untuk bergerak ke belakang dan sebagainya:

.carousel figure img {
  @for $i from 2 through $n {
    &:nth-child(#{$i}) {
      transform: rotateY(#{($i - 1) * $theta}rad);
    }
  }
}

Ini adalah hasil akhir, demonstrasi di mana beberapa carousels instantiated, masing -masing dengan konfigurasi yang berbeza: (pautan codepen akhir harus dimasukkan di sini)

Sumber dan kesimpulan

Sebelum akhir, saya hanya ingin mengucapkan terima kasih kepada beberapa sumber untuk meneliti tutorial ini: (sumber rujukan harus disenaraikan di sini)

Jika anda mempunyai sebarang pertanyaan atau komen mengenai fungsi gambarajah kod atau karusel, sila bebas meninggalkan mesej di bawah.

Soalan Lazim di Bangunan Rajah Carousel Rotary 3D dengan CSS dan JavaScript

Bagaimana untuk menyesuaikan rajah karusel berputar 3D saya?

menyesuaikan graf karusel berputar 3D anda melibatkan penggunaan pertanyaan media dalam CSS. Pertanyaan media membolehkan anda menggunakan gaya yang berbeza ke peranti yang berbeza mengikut saiz skrin peranti anda. Anda boleh menyesuaikan saiz dan kedudukan elemen graf karusel untuk disesuaikan dengan skrin yang lebih kecil. Juga pertimbangkan acara sentuhan pada peranti mudah alih, kerana mereka tidak mempunyai keadaan hover seperti komputer desktop.

Bolehkah saya menambah lebih banyak slaid ke karusel?

Ya, anda boleh menambah lebih banyak slaid ke karusel. Dalam struktur HTML, anda boleh menambah lebih banyak item senarai dalam senarai yang tidak teratur. Setiap item senarai mewakili slaid. Ingatlah untuk menyesuaikan sudut putaran setiap slaid dalam CSS untuk meletakkannya dengan betul dalam ruang 3D.

Bagaimana untuk menambah butang navigasi ke gambarajah karusel?

Anda boleh menambah butang navigasi ke gambarajah karusel menggunakan HTML dan JavaScript. Dalam HTML anda, tambahkan dua butang untuk navigasi sebelumnya dan seterusnya. Dalam JavaScript anda, tambahkan pendengar acara ke butang ini. Apabila diklik, mereka perlu mengemas kini putaran karusel untuk memaparkan slaid sebelumnya atau seterusnya.

Bolehkah saya menggunakan imej dan bukannya warna pepejal sebagai slaid?

Sudah tentu, anda boleh menggunakan imej sebagai slaid. Daripada menetapkan warna latar dalam CSS, anda boleh menetapkan imej latar belakang untuk setiap slaid. Pastikan imej mempunyai saiz dan resolusi yang betul untuk kesan visual yang terbaik.

Bagaimana untuk menambah fungsi main balik automatik ke gambarajah karusel?

Autoplay boleh ditambah menggunakan JavaScript. Anda boleh menggunakan fungsi setInterval untuk mengemas kini giliran gambarajah karusel secara automatik selepas tempoh masa. Ingatlah untuk membersihkan selang waktu apabila pengguna berinteraksi dengan karusel untuk mengelakkan tingkah laku yang tidak dijangka.

Bolehkah saya menambah kesan peralihan ke karusel?

Ya, anda boleh menambah kesan peralihan ke karusel menggunakan CSS. Hartanah transition membolehkan anda untuk mengubah animasi dalam sifat CSS dalam tempoh yang ditentukan. Anda boleh memohon kepada atribut transform untuk menghidupkan putaran peta karusel.

bagaimana membuat gelung peta karusel tak terhingga?

Membuat graf karusel Infinite Loop melibatkan beberapa JavaScript. Apabila karusel mencapai slaid terakhir, anda boleh menetapkan semula putarannya ke slaid pertama. Ini memberi orang ilusi gelung tak terhingga.

Bolehkah saya menambah teks ke slaid?

Ya, anda boleh menambah teks pada slaid. Di HTML anda, anda boleh menambah elemen teks ke setiap item senarai. Dalam CSS anda, cari elemen teks mengikut kedudukan slaid dan gaya mereka seperti yang diperlukan.

Bagaimana untuk menambah kesan pudar ke carta karusel?

CSS boleh digunakan untuk menambah kesan pudar. Anda boleh menggunakan atribut opacity dalam kombinasi dengan atribut transition untuk menghidupkan kesan pudar. Laraskan tayangan slaid ke kedudukan dalam karusel untuk mewujudkan kesan yang diingini. opacity

Bolehkah saya menggunakan bentuk yang berbeza seperti karusel?

Ya, anda boleh menggunakan bentuk yang berbeza sebagai karusel. Bentuk graf karusel ditentukan oleh atribut transform dalam CSS. Dengan menyesuaikan nilai harta transform, anda boleh membuat karusel kiub, silinder, atau bentuk 3D yang lain.

Atas ialah kandungan terperinci Membina karusel berputar 3D dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!