Cara Membuat Efek Flip Pada Gambar Di Blog Dengan Mudah

Setelah pada artikel sebelumnya saya bagikan Cara Membuat Efek Zoom Berputar Pada Gambar Di Blog Degan Mudah, para artikel kali ini akan saya bagikan bagaimana cara membuat efek flip pada gambar di blog engan mudah.

Memberi efek flip pada gambar di blog ini hanyalah untuk membuat tampilan blog sobat menjadi lebih menarik, efek gambar flip ini akan terlihat apabila kursor yang ada pada blog di arahkan pada gambar yang sudah diberi efek flip.

Jika sobat tertarik untuk membuat efek flip pada gambar di blog, berikut saya perikan tutorialnya:

1. Sobat harus Login terlebih dahuli pada blog yang sobat miliki
2. Pada dasbor blogger, klik menu Template.

3. Setelah itu, di dalam menu Template, klik Edit HTML

4. carilah kode ]]></b:skin> untuk mempermudah pencarian, klik tombol CTRL + F.

5. Kemudian setelah kode ]]></b:skin> ditemukan, letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.

div.flip{
position:left;
width: 300px;
height: 250px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 70%;
height: 70%;
-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:left;
width: 70%;
height: 70%;
-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);
}

6. Setelah itu, klik Simpan Template.

Untuk menerapkan gambar berputar pada postingan, sobat masukkan kode di bawah ini saat membuat artikel pada HTML ( bukan Compose ).

<div class="flip" style="width: 540px; height: 300px; display: inline-block;"><div class="rotate y"> <img src="http://www.mediaindonesia.com/assets/upload/news/inside/2015-01-25_::00-7599_1_a.jpg"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRzwxREdXKjJI7DY6MPhc1zHEPQALmdHPijh3FrtcViUoG5lUdsnzKwWBcSBgIvpcBPNEjgde-_S4Y1exOFBtjAqtDki97ASDKT8lIUjOwqqmkzpCIzQd1hADrcP6ysksfmPFlSYOjm_Q/s1600/Fatin.jpg"></div></div></br></br><div class="flip" style="width: 540px; height: 300px; display: inline-block;"><div class="rotate x"> <img src="http://cdn1-a.production.liputan6.static6.com/medias/827982/big/071732000_1426238522-Fatin-2.jpg"> <img src="http://fatinsl.com/wp-content/uploads/2015/03/Fatin-Shidqia-Lubis-4.jpeg"></div></div>