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.
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
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/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div>
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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151412585.jpg" 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. </p><p> 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: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151540038.jpg" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " /> <s>
</p> 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. <p>
</p> <p> Bina struktur geometri graf karusel <strong> </strong>
</p> Dalam bahagian ini, saya akan menunjukkan kepada anda peraturan CSS utama, yang akan saya jelaskan langkah demi langkah. <p>
</p> Dalam coretan kod berikut, gunakan beberapa pembolehubah SASS untuk menjadikan komponen lebih mudah untuk mengkonfigurasi. Saya akan menggunakan <p> untuk mewakili bilangan imej dalam karusel dan gunakan <code>$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>
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" 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> berpusat secara mendatar dalam bekas karusel. <figure>
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>
.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 */
}
}
}
}Setelah menukar sistem rujukan elemen
, seluruh karusel boleh diputar oleh putaran paksi y (baru): <figure>
.carousel figure {
transform-origin: 50% 50% (-$apothem);
}mari kita terus menukar imej lain. Menggunakan kedudukan mutlak, imej disusun di dalam
: <figure>
.carousel figure {
transform: rotateY(/* some amount here */rad);
}, ubah suai transformasi lalai imej dan gerakkannya ke pusat poligon: <figure>
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" 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.
). <figure>
: @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 */
}
}
}
} 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
. 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);
} adalah fungsi trigonometri tangen. tan()
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);
}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.
kemas kini currImage, putaran imej karusel akan dilakukan dengan cara berikut:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" 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:
Seterusnya, fungsi
dalam skrip bertanggungjawab untuk memulakan contoh: carousel()
.carousel figure {
transform-origin: 50% 50% (-$apothem);
} merujuk kepada elemen DOM yang menjimatkan gambarajah karusel. root
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:
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/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div> Bilangan imej (n) diasaskan mengikut bilangan elemen kanak -kanak <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> 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> 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
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.
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.
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.
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.
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.
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.
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.
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.
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
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!
Apakah maksud Linux?
virus komputer
harga mata wang fil harga masa nyata
Bagaimana untuk menyelesaikan masalah bahawa salinan tingkap ini tidak tulen
seni bina c/s dan seni bina b/s
Mengapakah semua ikon di penjuru kanan sebelah bawah win10 muncul?
30 mata wang digital global teratas
Apakah pengendali dalam bahasa Go?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
