Galeri gambar adalah fitur yang sangat berguna untuk aplikasi web. Pada dasarnya, galeri gambar membantu mengelompokkan gambar dalam tampilan yang user-friendly di halaman web. Efek 3D membuat galeri foto lebih atraktif dan menyediakan user interface yang lebih baik. Tutorial ini akan menunjukkan cara membuat galeri foto 3D menggunakan CSS saja.
Ada banyak plugin jQuery yang tersedia untuk membuat galeri foto 3D. Tapi plugin pihak ke-3 meningkatkan ukuran halaman web yang akan mempengaruhi page-load website. Jadi, kalau kamu ingin membuat galeri gambar 3D dengan CSS tanpa menggunakan plugin, konsep 3D CSS ini mungkin membantu melakukannya dengan mudah.
Rotasi Carousel 3D dengan CSS
HTML dan CSS berikut digunakan untuk membuat galeri berputar 3D.
HTML
HTML ini menyimpan semua gambar galeri foto 3D.
<div id="carousel"> <figure><img src="gambar/img1.jpeg" alt=""></figure> <figure><img src="gambar/img2.jpeg" alt=""></figure> <figure><img src="gambar/img1.jpeg" alt=""></figure> <figure><img src="gambar/img2.jpeg" alt=""></figure> <figure><img src="gambar/img1.jpeg" alt=""></figure> <figure><img src="gambar/img2.jpeg" alt=""></figure> <figure><img src="gambar/img1.jpeg" alt=""></figure> <figure><img src="gambar/img2.jpeg" alt=""></figure> <figure><img src="gambar/img1.jpeg" alt=""></figure> <figure><img src="gambar/img2.jpeg" alt=""></figure> </div>
CSS
CSS berikut yang akan menambahkan efek rotasi dan 3D ke galeri dan membuat galeri berputar 3D.
#carousel{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 20s infinite linear; } #carousel:hover{ animation-play-state: paused; } #carousel figure{ display: block; position: absolute; width: 90%; height: 78%; left: 10px; top: 10px; background: white; overflow: hidden; border: solid 4px white; } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} #carousel figure:nth-child(10) { transform: rotateY(360deg) translateZ(288px);} #carousel img{ -webkit-filter: grayscale(1); cursor: pointer; transition: all .5s ease; width:100%; } #carousel img:hover{ -webkit-filter: grayscale(0); transform: scale(1.2,1.2); } @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
Pada contoh code membuat galeri berputar dengan transformasi 3D akan terlihat seperti capture di bawah ini. Selain itu, pada saat meng-hover gambar, rotasi galeri akan berhenti dan gambar akan dimanipulasi secara visual.
Kesimpulan
Dalam contoh skrip, gambar statis ditampilkan di galeri foto 3D. Kamu juga bisa menampilkan gambar yang dinamis di galeri tersebut menggunakan PHP. Berdasarkan jumlah gambar, property figure:nth-child(n)
perlu ditentukan dalam CSS.