Gallery Gambar 3D ( 3 Dimensi )

Gallery Gambar 3D ( 3 Dimensi ) - Gambar merupakan salah satu petunjuk untuk membantu menerangkan maksud sebuah tulisan pada artikel di blog, sehingga tanpa harus membaca keseluruhan isi dari artikel tersebut, pengunjung akan dengan mudah memahami dan melakukan praktek langsung atas apa yang Anda sajikan sebagai informasi dalam artikel blog yang mereka baca. Untuk memanjakan pengunjung yang bertamu di blog Anda, banyak cara agar tampilan gambar postingan terlihat lebih menarik, keren dengan sentuhan-sentuhan berbagai macam efek gambar seperti:

• Memberi Tanggal Terbit Pada Gambar Saat Hover
• Efek Slidding Pada Gambar Postingan
• Membuat Gambar Dengan Efek Flip Animasi
• Tampilkan Foto Kecil Saat Gambar Utama Dihover
• Membuat Teks Descripsi Pada Gambar Hover

Saya menggunakan Carousel Effect (Efek Berputar) dengan animation:rotation 20s infinite (Gerakan berputar tak terbatas dengan kecepatan 20/detik) pada gallery gambar kali ini, sedangkan untuk mempercantik tampilan gambar saya bungkus dengan CSS transform-style:preserve-3d (Model 3 Dimensi) dengan efek filter blur pada setiap gambar menggunakan perintah kode CSS seperti ini:


#gallery {
  width: 100%;height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
}

Untuk menghentikan gerak putaran, saya menghubungkan fungsi pointer mouse dengan efek hover. Jadi, tampilan gallery gambar akan terus berputar, dan hanya akan berhenti jika panah mouse Anda melintas diatasnya dengan CSS seperti ini:


#gallery:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
}

Cara Membuat Gallery Gambar 3D ( 3 Dimensi )
Saatnya melakukan percobaan untuk membuat gallery gambar efek 3D ( 3 Dimensi ). Pada formulir baru halaman posting, cukup Copy kode CSS berikut, lalu letakkan pada mode tulis HTML (Bukan Compose) saat Anda ingin membuat artikel baru, namun pada setiap barisan kode sudah saya beri tanda, jadi silahkan Anda ubah dan sesuaikan dengan tampilan keinginan Anda. Kode lengkapnya seperti ini:

<style type='text/css'>
.stage {
  margin: 0 auto;width: 210px;height: 140px;
  position: relative;perspective: 1000px;}

#gallery {
  width: 100%;height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
  -webkit-animation: rotation 20s infinite linear;
  -moz-animation: rotation 20s infinite linear;}

//menghentikan gerak putaran (hover mouse)...
#gallery:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;}

#gallery figure {
  display: block;position: absolute;
  width: 186px;height: 116px;
  left: 10px;top: 10px;
  background: black;overflow: hidden;
  border: solid 5px #666;}

//peletakan serta pengaturan tampilan gambar...
#gallery figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
  -webkit-transform: rotateY(0deg) translateZ(288px);
  -moz-transform: rotateY(0deg) translateZ(288px);}

#gallery figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(288px);
  -webkit-transform: rotateY(40deg) translateZ(288px);
  -moz-transform: rotateY(40deg) translateZ(288px);}

//teruskan dengan selisih nilai rotateY(40deg) pada gambar berikutnya...
#gallery figure:nth-child(3) { ...}
#gallery figure:nth-child(4) { ...}

img{
   -webkit-filter: grayscale(1);
   cursor: pointer;
   transition: all 1.5s ease;
   -webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;}

img:hover{
   -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
   -webkit-transform: scale(1.2,1.2);
   -moz-transform: scale(1.2,1.2);
   transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);}

@keyframes rotation{
 from {transform: rotateY(0deg)}
 to {transform: rotateY(360deg)}}
</style>
<div class="stage">
    <div id="gallery">
<figure><img src="http://URL-Gambar Anda (1).png" alt="..."></figure>
<figure><img src="http://URL-Gambar Anda (2).png" alt="..."></figure>
...
//dan seterusnya...
    </div>
</div>

Dan Hasilnya:




DEMO SHOW



Bagaimana menurut sahabat semua pecinta SAHABAT BLOGGER 77 tentang tampilan Gallery Gambar Efek 3D kali ini, terlihat keren dan menarik bukan.! hehe..!!?. So, jika ada kendala saat menerapkan fungsi kode-kode diatas, mari kita bahas dalam kolom komentar.

Enjoy guys..!!?