Membuat efek gambar 3D Flip dengan CSS ~ blog sepot

Hai sobat apa kabar? Di pagi yang cerah ini saya akan berbagi trick yang lumayan keren yaitu Membuat efek gambar 3D Flip dengan CSS Sebuah gambar tanpa CSS mungkin bisa dibilang seperti wanita tanpa make up. HaHaHaa
Maka berikut adalah tutorial untuk membuat Membuat efek gambar 3D Flip dengan CSS di postingan blog:

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

div.flip{
position:relative;
width: 300px;
height: 250px;
-webkit-perspective: 600px; 
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{ 
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){ 
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

5. Untuk memanggil kode diatas supaya muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting blog.

<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate x">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCh_u655l9PcrVPkJBDOkkKqOlNCds5Ppm6GiHLvZDQbX22Qel4i0V4uZ4knyJgEcB6Quwa6D2mze_0crDzKDgabPg3ud8daBmq-83gOnAX4AkEFYgiUB0WB9bCmSaTyJfAyNRqOC_7J34/s1600/BIE_Demo-1.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhazuzdl69gfI1c1pjLQLnm1dgq8OGaGLfbxeTW2p33EDf3ZeRmWCz1IUhNUQtScIpQzzhDl5QANlQaE2hXpYDAy_-5kSAgwWfT9SBpR78wDv_ouqG68p4SOuRgYTt3zVk5J9XiTI_RX84D/s1600/BIE_Demo-4.jpg">
</div>
</div>
</br></br>
<div class="flip" style="width: 540px; height: 300px; display: inline-block;">
<div class="rotate y">
 <img src="hhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPJCF_PHlRRpzOYKobnbmxI6evYFhQ43KfHnQDxSNjlmqf_y6rdCMerUQcP4u56WHUnnF9JYHhRMzXh6MPy-ORQLhXLwaDs0QtPYJ-XupXFZRvw9GYBMCdSPyStSDQqzDxOOMv132107y/s1600/BIE_Demo-2.jpg">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ojZt9XJulE_EscW13WZ8_kdQAJfMJkwqK1306L0Ggh6lQqOT8Zdc37MCQN5VekqpkBVFJuQag7AKgFC7CCYrAKvz3-l51_wR2AmUPlb4SKq5HCAwDRQp1lsusGrGuHcCFXjw_Ir3YNcC/s1600/BIE_Demo-3.jpg">
</div>
</div>

Keterangan:
Untuk width dan hight maupun URL gambar silahkan sesuaikan sendiri sesuai selera sobat.

DEMO nya seperti ini:

Terima kasih telah membaca artikel tentang Membuat efek gambar 3D Flip dengan CSS di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.