31.8.14
14
Membuat Carousel Gambar 3D Dengan CSS Transform - Membuat tampilan gambar di blog dengan desain 3D, hanya merupakan selingan untuk sekedar memberikan efek yang menarik pada tampilan gambar di blog. Sedangkan efek 3D (3 Dimensi) akan memperlengkap tampilan gambarnya agar terlihat nyata.

Seperti layaknya sebuah pameran, yang memperlihatkan barang dagangannya dengan catalog gambar pilihan dengan efek slide, sekarang pertunjukan tersebut akan saya coba terapkan pada sebuah halaman posting blog Anda. Agar tampilan gallery gambar terlihat benar-benar nyata (Performa Gambar 3 Dimensi), saya sudah ubah pengaturannya dengan CSS transform-style: preserve-3d yang saya gabungkan dengan efek animation-duration dan animasi-rotate untuk menghasilkan putaran gallery gambar secara otomatis seperti ini:




DEMO SHOW





Gallery photo Coursel 3D picture


Top Post - Membuat Tampilan Popular Post Dengan Slideshow


Pada tampilan gambar, saya menggunakan 5 buah gambar mobil yang saya balut dengan background-transparent, jika Anda sudah menentukan salah satu pilihan pada gambar, maka untuk menghentikan putaran gambar saya sisipkan CSS seperti ini:


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



PENERAPAN GAMBAR KE BLOG
1.1 HTML Markup

Saatnya penerapan hasilnya pada blog, namun sebelumnya persiapkan dahulu gambar yang akan Anda tampilkan pada pameran gallery untuk postingan Anda, jika sudah gantikan pada kode yang saya beri warna Merah dengan URL gambar Anda pada HTML berikut:



<div id="stage">
   <div id="carousel">
<img class="pic1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qin1ZhzixGvb1ZeVSMpjveXnKnMeFNfIopX2MUKSLa0qbUz6bxTHHKRpQJh4DryIiWeV44MSGLTAHny0t1dNN6N3KtRjMLKQQM-L8KTuil8JLYSUuANesro4f-2w8SNgJaQ0eLWyXKM/s1600/mobil-1.jpg" alt="Car Picture">

<img class="pic2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyTP6332fMY00SddqCrj0_Ave5xFQa4WJ0BLEoXp_fEBUNC7qAEWB6J7cZvrF4Egera0jnzQp_8QkseIHfpoaTeKDitwyM9eygUGJry2LYm0MdrtMaiS4-9neYPhfTnPm4n8nHScW6bU/s1600/mobil-2.jpg" alt="Car Pictures">

<img class="pic3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajyvexyI_aYDUk9QupGUxJ4BWjEjfD-lt-kqP2-QXvfiUZrWeiI3PZeV-eAcu53w6XIb1TRLVcZzkA4FzyX66vcmDOFCwKjc3k1ntDHbn9ZEY3pSLapvXrAhaGct2ZYJqzX2V7hII8uM/s1600/mobil-3.jpg" alt="Car Picture">

<img class="pic4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8SN6UdxgrQuCcgVPZa5YlH1PShKIMoUcSoW1EqNt8LgS6RMf58_u_rhcZJbp7mrjgdMdl_xvcY00_vgesddveM7q7QOPF44ENz1olRj84ea3V6qUTaeitsdEMpZRSVrXAYa_AcI_j1s/s1600/mobil-4.jpg" alt="Car Picture">

<img class="pic5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJlo_UuTfD7Cdmm5YAedtkyfYNaiSzajgpe_10SMIFVPe2l5QF3PaUHQXvfbXayG7NcHuPsZ-gyXPQmafGJA3ouWTaTFklsL_fy8IA7dKUo-qcSA2KerDtaKm3PUMUB9SRLIH8Axogkk/s1600/car-6.png" alt="Car picture">
   </div>
</div>


1.2 CSS Setting

1.2.1 Pada Edit-Template, temukan kode ]]></b:skin>
1.2.2 Lalu, letakkan kode dibawah ini tepat diatasnya.


@-webkit-keyframes carousel {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(-360deg);}}

@-ms-keyframes carousel {
  from {-ms-transform: rotateY(0deg);}
  to {-ms-transform: rotateY(-360deg);}}

@-moz-keyframes carousel {
  from {-moz-transform: rotateY(0deg);}
  to {-moz-transform: rotateY(-360deg);}}

@keyframes carousel {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(-360deg);}}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
  padding-left: 180px;
  height: 160px;}

//transformasi tata-letak gambar
.pic1 {
  -webkit-transform: rotateY(0deg) translateX(180px);
  -moz-transform: rotateY(0deg) translateX(180px);
  transform: rotateY(0deg) translateX(180px);
  padding: 0 0 0 160px;
  width:200px;
  height:160px;}

.pic2 {
  -webkit-transform: rotateY(-72deg) translateX(180px);
  -moz-transform: rotateY(-72deg) translateX(180px);
  transform: rotateY(-72deg) translateX(180px);
  padding: 0 0 0 147px;
  width:213px;
  height:160px;}

.pic3 {
  -webkit-transform: rotateY(-144deg) translateX(180px);
  -moz-transform: rotateY(-144deg) translateX(180px);
  transform: rotateY(-144deg) translateX(180px);
  padding: 0 0 0 120px;
  width:240px;
  height:160px;}

.pic4 {
  -webkit-transform: rotateY(-216deg) translateX(180px);
  -moz-transform: rotateY(-216deg) translateX(180px);
  transform: rotateY(-216deg) translateX(180px);
  padding: 0 0 0 147px;
  width:213px;
  height:160px;}

.pic5 {
  -webkit-transform: rotateY(-288deg) translateX(180px);
  -moz-transform: rotateY(-288deg) translateX(180px);
  transform: rotateY(-288deg) translateX(180px);
  padding: 0 0 0 122px;
  width:238px;
  height:160px;}

#carousel {
  -webkit-animation-name: carousel;
  -moz-animation-name: carousel;
  animation-name: carousel;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-duration: 6s;
  -moz-animation-duration: 6s;
  animation-duration: 6s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transform-origin: 180px 0 0;
  -moz-transform-origin: 180px 0 0;
  transform-origin: 180px 0 0;}

//menghentikan gerak rotasi dengan pointer
#carousel:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;}

#carousel img {
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255,255,255,0.8);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);}



Ini hanya sebuah alternatif inspiration, keberadaanya tidak mutlak, jadi Anda bisa menaruh link aktif pada URL gambar diatas yang mengarah pada halaman Anda yang lain.
Karena "Apa Yang Kita Awali, Akan Menentukan Apa Yang Akan Terjadi"

Selamat bersenang-senang and Happy blogging.!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Carousel Gambar 3D Dengan CSS Transform
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 =

14 komentar

  1. Mantab mbak, tapi sayang aku gak paham yg ginian.

    BalasHapus
    Balasan
    1. ya sudah dech kalau gak ngerti,saya juga jadi gak ngerti mau balas komentar apa.?

      Hapus
  2. wah ini keren, tapi bikin blog berat ngga ya?

    BalasHapus
    Balasan
    1. jika blog terasa berat, dibuang saja mas muatannya biar ringan..
      hehe..!!

      Hapus
  3. wadduh..wadduh..wadduh..nda bisa napas..!, harus bisa diterapin ini..!

    BalasHapus
  4. Balasan
    1. sukses kan..!! heheh

      Hapus
    2. sukses..mba..! baru liat efek seperti ini
      pinjam fotonya satu ya Mba ..!, (semalam diambil di laci) buat pengantar tidur (f),,soalnya .. :-#

      Hapus
  5. jadi tambah keren ya tampilan gambar nya kalau dibuat 3D, bisa dicoba nih tutrialnya ;)

    BalasHapus
    Balasan
    1. seakan terlihat nyata mbak, padahal hanya 5 buah gambar yang ditumpuk dengan sumbu x sebagai central. (3 dimensi)

      Hapus
  6. Mantap gan buat benerin seo.. Oiya monggo mampir gan

    BalasHapus
  7. hadir untuk kunjungan malam

    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