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:
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:
1.2 CSS Setting
1.2.1 Pada Edit-Template, temukan kode ]]></b:skin>
1.2.2 Lalu, letakkan kode dibawah ini tepat diatasnya.
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"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:
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;}
-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.
Selamat bersenang-senang and Happy blogging.!
