Cara menciptakan pengaruh Flip Pada Gambar Di Blog Dengan praktis

Setelah pada artikel sebelumnya aku bagikan Cara membuat efek Zoom Berputar Pada Gambar Di Blog Degan praktis, para artikel kali ini akan saya bagikan bagaimana Tutorial menciptakan pengaruh flip pada gambar di blog engan simpel.

Memberi efek flip pada gambar di blog ini hanyalah untuk menciptakan 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 imbas flip.



Jika sobat tertarik untuk menciptakan pengaruh flip pada gambar di blog, berikut saya perikan tutorialnya:

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

3. sesudah itu, di dalam sajian Template, klik Edit HTML

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

5. kemudian sehabis instruksi  ]]></b:skin> ditemukan, letakkan aba-aba di bawah ini sempurna di atas instruksi  ]]></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. sehabis itu, klik Simpan Template. 

Untuk menerapkan gambar berputar pada postingan, teman masukkan isyarat di bawah ini ketika menciptakan 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/AVvXsEhBl2M5SoMP_9X9EuS45BItQqD3XsL8Ds2t3Qu2E3w-JwgUuli2mI9i_08xLDYQRst5Y1cx_KXZlg971pfIaFGAEXmuO8fQlgBa5dmHiWYz9AEWDvhV4ZP6j0Ee1AwNHVzsc2yp9a3PwwqA/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> 

Catatan!
Pada penggalan isyarat yang saya beri warna merah dan biru, sahabat ganti dengan url gambar sahabat yang ingin di tanpilkan pada artikel blog 

Tampilan Gambar setelah Di Beri dampak Flip