5.12.14
37
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:



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..!!?

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Gallery Gambar 3D ( 3 Dimensi )
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

37 komentar

  1. tadi saya liat demonya keren sekali mbak gambarnya bisa muter muter kwkwkwk saya izin simpen skrip nya yah mbak buat kapan kapan :)

    BalasHapus
    Balasan
    1. yg pasti nda bayar lah Cinta..!,

      Hapus
    2. biar yang ngeliat ikutan muter-muter juga cinta, kayak mas Aldino, hehe..

      Hapus
    3. Saya seneng lihat DEMO nya yang cantik, apalagi kalau lihat langsung Mbak Devy nya yang lebih cantik dari DEMO nya *salam canda aja Mbak Dev.. :)

      Hapus
    4. hehe.. gak apa-apa mas, hidup ini kan butuh juga hiburan mas, jadi sesama blogger tidak disalahkan bila saling bercanda,, bukan begitu mas mandor, hehe..!!

      Hapus
  2. sebelumnya.. sy ucapkan makasih atas menu daunnya.. ya Vy..!,
    kalo yg inih ..!, Glek..aah.. tunggu..tunggu..!, nda bakalan dilewatkan

    lagi ngumpulin sisa2 masa lalu.. soalnya sudah menyebar di tiup angin.. jadi harus berjuang sendiri ngumpulinnya..

    artinya gambar 3d nya Pas buat simpan foto2 masa lalu..inih Vy..!

    BalasHapus
    Balasan
    1. tadi juga sudah Devy lihat mas, modifikasinya dengan 1 warna, sesuai dengan tampilan blognya, tetapi kenapa efek hovernya gak diaktifkan mas,sekalian teksnya kurang center area.
      tetap keren.

      kalau yang ini disimpan saja mas, buat menyimpan foto-foto mas Al kecil yang bandel dulu

      Hapus
    2. itulah Vy,..!
      dari kemarinm mau tanyainn bagaimana caranya..yaa terpaksa dikorek sedikit dan hasilnya seperti Vy liat sendiri..

      jadi solusinya bagaimna nih Vy.. biyar tambah.. keren..! ditunggu ya..?

      Hapus
    3. Sudah keren kok mas, hanya tulisan teksnya saja kurang center, untuk mengaturnya lihat pada kode height menu,

      jika nilai height="30px" maka gunakan pengaturan teks dengan line-height:30px dengan text-align:center, sehingga padding kiri,kana atas dan bawah sama ukuran.

      seperti ini misalnya:

      font:bold 14px/30px Arial,sans-serif;

      Hapus
    4. blom paham maksudnya Vy..!,
      menu li ato menu li a..atau yg diradius-radius..?

      Hapus
    5. pada menu li a {...}

      Hapus
  3. liat demonya keren sist galery nya, izin copas codenya sist,
    test tkp, terima kasih.

    BalasHapus
    Balasan
    1. mau di COPAS untuk dipakai atau mau disebarluaskan, hayoo..!! hehe..

      tetapi apapun itu, Devy dengan senang hati, mau dicopas dan dikupas semua terserah mas buret sajalah., gimana baiknya sajalah, hehe

      Hapus
    2. ecieee mbak devi baik banget deh jadi greget :D

      Hapus
    3. jadi nyanyi dech, geregetan akunya geregetan, hehe..!!

      Hapus
  4. terlihat keren jadinya ya mbak, saya mau cobe deh, bolehkan heehee (h)

    BalasHapus
  5. makasih izin pake yah.., langsung praktek. ko punya aku ga rapi ya.. kalo demo disini cantik, punya aku ko gambarnya ga tampil semua ya.. hihi ternyata masih sulit :-) ;-(

    BalasHapus
    Balasan
    1. pada tampilan demo, saya menyisipkan 9 buah gambar, jadi silahkan teh santika teruskan kode HTML diatas sebanyak yang teh santika inginkan, namun sejajarkan dalam penyusunannya. contoh seperti ini:

      <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><figure><img src="http://URL-Gambar Anda (3).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (4).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (5).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (6).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (7).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (8).png" alt="..."></figure><figure><img src="http://URL-Gambar Anda (9).png" alt="..."></figure>
      </div>
      </div>


      selanjutnya atur CSS gambarnya dengan selisih nilai rotate 40deg, contoh seperti ini:

      #gallery figure:nth-child(1) {
      transform: rotateY(0deg) translateZ(288px);}
      #gallery figure:nth-child(2) {
      transform: rotateY(40deg) translateZ(288px);}
      #gallery figure:nth-child(3) {
      transform: rotateY(80deg) translateZ(288px);}
      ...dan seterusnya sampai:

      #gallery figure:nth-child(9) {
      transform: rotateY(320deg) translateZ(288px);}

      Hapus
  6. saya hanya baru mampu menyimak cara membuat galeri gambar 3D belum sanggup membuat galerinya mah

    BalasHapus
  7. Wah wah memang keren mba ku yang satu ini. Sudah cakep , pintar pula. Heiheie. Idaman para pria di seluruh Dunia beneran deh. Heihiehiee. Saya coba script ini di salah satu blog uji cuba script saya. Jika berhasil dengan baik tanpa error Insya Allah akan sayay terapkan di blog utama saya

    BalasHapus
    Balasan
    1. mas asep ini pinter ngrayu juga :d :d :d

      Hapus
    2. bener teh, sudah klepek-klepek Devy disini, baca rayuan kang kasep, ehhh...kang asep

      Hapus
  8. Setelah saya Lihat demo nya sungguh sangat cantik Galery nya Mbak Devy.. saya coba ya Mbak sungguhan untuk gallery foto singers saya yang cantik cantik kaya Mbak Devy deh hhh

    BalasHapus
  9. keren mba, Gambarnya jadi kelihatan hidup 3 dimensi :) saya izin simpen dulu scriptnya ya.. makasih (o)

    BalasHapus
  10. Wuidih, liat demo-nya jadi pengen mbak :-d

    BalasHapus
  11. Lebih mantab dan cantik kalau 3D, apalagi bisa muter2

    BalasHapus
  12. akhirnya saya ketemu juga mbak.. saya coba lihat demonya dari browser firefox dan chrome ternyata ada perbedaannya mbak...

    dari firefox : bordernya saat memutar agak putus-putus. dan warna gambar tetap bewarna saat di hover juga tetap bewarna mbak.
    dari chrome : bordernya saat memutar tidak terlihat putus-putusnya. dan warna gambarnya menjadi grayscale, tapi saat di hover berwarna gambarnya mbak.. itu lah bedanya mbak, tapi kenapa seperti itu ya mbak.. (o)

    tapi keren kog mbak... (h)

    BalasHapus
    Balasan
    1. dukungan vendor peramban mas jai, pada pengaturan CSS image, saya hanya menggunakan perintah -webkit tanpa all vendor, sehingga saat ditampilkan pada mozila, tampilan akan berbeda karena browser tidak merespon kode.

      kode diatas seperti ini:


      img {
      -webkit-filter: grayscale(1);
      ....}

      img:hover {
      -webkit-filter: grayscale(0);
      ....}



      Sekarang coba ubah menjadi seperti ini:

      img {
      -webkit-filter: grayscale(1);
      -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
      -o-filter: grayscale(1);
      filter: grayscale(1);
      ....}

      img:hover {
      -webkit-filter: grayscale(0);
      -moz-filter: grayscale(0);
      -ms-filter: grayscale(0);
      -o-filter: grayscale(0);
      filter: grayscale(0);
      ....}


      Lihat kembali hasilnya pada firefox, pasti akan sama tampilannya pada chrome.

      Hapus
    2. ooh pantasa saja mbak... saat di lihat demo berbeda ternyata mbak nya hanya menggunakan -webkit iya mbak saya tau sudah tau kog sekarang.. :)

      Hapus
    3. karena hanya chrome yang dapat membaca kode tanpa harus menyisipkan vendor browser-nya, seperti -webkit- adalah dukungan browser untuk chrome, tetapi ada beberapa bentuk CSS tanpa kita menyisipkan kode -webkit- tetapi chrome dapat merespon kodenya, sehingga efek bisa dinikmati.

      begitupun dengan media animasi keyframes (@keyframes)
      semua kode pendukung harus kita sisipkan semuanya, karena tidak semua sahabat menggunakan chrome browser dalam internet.

      //all browser validasi...
      @keyframes rotation {
      from {transform: rotateY(0deg)}
      to {transform: rotateY(360deg)}}

      //chrome dan safari...
      @-webkit-keyframes rotation{
      from {-webkit-transform: rotateY(0deg)}
      to {-webkit-transform: rotateY(360deg)}}

      //mozila firefox...
      @-moz-keyframes rotation{
      from {-moz-transform: rotateY(0deg)}
      to {-moz-transform: rotateY(360deg)}}

      //opera...
      @-o-keyframes rotation{
      from {-o-transform: rotateY(0deg)}
      to {-o-transform: rotateY(360deg)}}

      Hapus
  13. kunjungan perdana mbak,,, nyimak dulu ya sama konfirmasi kalo blog mbak sudah saya follow, ditunggu follbacknya ya mbak,,,,
    terima kasih :d

    BalasHapus
  14. demonya keren banget mba..riil 3D,
    tinggal pasang jika membutuhkan, makasih mba :))

    BalasHapus
  15. Mana preview gambarnya mbak???

    BalasHapus
  16. pucing saya teh devy,kaga becus.hehe

    BalasHapus
  17. Mantep hasil karyanya mba dev

    BalasHapus
  18. Sis kalo diterapin di google site bisa ga? kasih tau dong ya...thx

    BalasHapus
  19. tengkayu berader saya coba di jualalatpemadamkebakaran.com

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK