Membuat Carousel Gambar 3D Dengan CSS Transform

Info informasi Membuat Carousel Gambar 3D Dengan CSS Transform atau artikel tentang Membuat Carousel Gambar 3D Dengan CSS Transform ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

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/AVvXsEgM7Bnix4f6t4qF22JBU4DOUZnz0nW6gjDWaUPY5tXDWtvKQmmQpzJJNzW3fPEmcM2hGsnkwZVTIClSWcKKVr-5XT3B2vNHWBI1hww09COAmq6bQKVEOtFJ6spBwL0adnuXsloI80hkjIo/s1600/mobil-1.jpg" alt="Car Picture">

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

<img class="pic3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDrYxtbZfm_PClLz32fVAPa6hSlIYhVp43I3vUWu_eNPcI7GE_lP4lkMX4K16E-aZJlDqX4qwdcdvVQdkTcXCR0gjyTCwJGtlNbKqswx3NcivBpKrOm4a4Og3ETAAWtKqtLuCxHsD7mH4/s1600/mobil-3.jpg" alt="Car Picture">

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

<img class="pic5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fBBDUvh_s8lQ62z7F4hUVr7tEg0U0cwJ5s31-hxwN9bCvXzkEziA3Fk0O78gqc31eivQvPONRkbEdVlIJ8ridj8nRfrHW-mTd4fv3CtONI9SeJ8C8feGuvltq1KhlM_ksYKyfLTMrOI/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.!

Demikian artikel tentang Membuat Carousel Gambar 3D Dengan CSS Transform ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Carousel Gambar 3D Dengan CSS Transform ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik