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.

CONTOH:

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/AVvXsEhGcapNnVLobj1MsmwUMTtHelw4DVH62AQJOnBDiuEeFfww0WXyj2O2sGci20ShnVxr2QERoeQ6-R-yAb2Zlz2mg7nPX_7ZUFpFMz6yCtW1tfzRgNBhPpZoC1U60aPPkO-70bvCDwobhu8/s1600/mobil-1.jpg" alt="Car Picture">
<img class="pic2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWUFy9K-JJfwe_8uCvWE0tYxmfxeWeQAIz9fCtnhFvHQW75mwRh0ahgFMiKH8mN4fiyU9AlrAB8gMCMilTPjHS8ypiBI8Z-iOsvIvsY5_vVIQmPoMgnySbOBTdSWOsswailpOXAIRMzc/s1600/mobil-2.jpg" alt="Car Pictures">
<img class="pic3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsswfJZdyQxyAp9QngxeYwBnD1zWkC4c8JzT0umnXtcpsIZfHYIMwj3XfDjt2F4apYlLsmMEsDPFYWfX2Hpx9BwJ7Ayj2-khK1AORHrZgD0dOOusaX2Va5Nk6EKPedOK0m57JrFNAbSc/s1600/mobil-3.jpg" alt="Car Picture">
<img class="pic4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRwsS7zl2POeGQchgwpguXBmLgZqqrCBwVoPMld0DL-t2J4OmUvhO-i_iKWH4E2bVQtSownV40CEyjs1NQzYxRWu0b8nVqRBBmAlxmZGObYz-gHTqWyFhfDEM1HAA10tEMr5_bwjbtkA/s1600/mobil-4.jpg" alt="Car Picture">
<img class="pic5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ8vJHqndV3aIFr47aUfhix9x2TkGikZd3n8Ps-ayaSCFb1rM_nZA9MTbTsBhyphenhyphenNzFysVzYKB4fBY-Png8qwtQmlS-BuJp8FWeRTx7GEIEDMZrBF1tf-KS6VEaBSVqxl_cVbXCGi7nkaQA/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"

Sumber: sahabatblogger77