Effect Flip Untuk Gambar Dengan CSS3

 Yo ... Sekarang saya mau ngasih cara baru nih ,, yaitu cara membuat Effect Flip Untuk Gambar Di Blog Dengan CSS3 Pastinya. Sebelum mulai ada yang Effect Flip Gak ?? kalau belum tau gini , Effect Flip ini hampir sama kaya nge Rotate gambar kalau nge Rotate biasakan gambarnya kebalik ? tapi kalau flip kita itu membalikan gambar tapi tidak terbalik kayak Foto Ini,, Nah udah tau kan ? kalau begitu ini dia caranya!

Caranya :

1. Login Blog Dulu

2. Masuk Ke Bagian Edit HTML

3. Terus Kalau Udah Di Edit HTML Kamu Cari Kode ]]></b:skin> terus Simpen Script Di Bawah Ini Tepat Di Atas Kode ]]></b:skin> :

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
} 

 4. Jika Sudah Save Template , Lalu Lihat Blog Kamu Semua Gambar Pada Kebalik Dengan Sempurna .

Gambar Semula :

Gambar Saat Terkena Effect Flip :

Nah Kalau Kamu Mau Effect Flip Ini Hanya Terkena Pada Gambar Tertentu Kamu Hanya Tinggal Membuat ID Tags/Class Tags dan Link Gambarnya Saja ... Misalnya ID Tags/Class Tags "gambar", Kamu Membuat Script CSSnya :

ID Tags:

#gambar {

        -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

        filter: FlipH;

        -ms-filter: "FlipH";





} 

Class Tags:

.gambar { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH";} 

Ditambah Dengan Script Link Gambar:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYK5jMPASVwtTJ6STnk5bFatSbvQFwD8hFSsaVnU3vbRKZ5VKrVKDrX1gdT3brqPjKDY10w2J5dVTcRtz03lmfEe4b2-Rwo0E0f7dmQqF2F7mf8IkgCa4-o6dd98QFqcj5D9lVKDqVgZgI/s1600/Flip+Image.png" target="_blank">

<img class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYK5jMPASVwtTJ6STnk5bFatSbvQFwD8hFSsaVnU3vbRKZ5VKrVKDrX1gdT3brqPjKDY10w2J5dVTcRtz03lmfEe4b2-Rwo0E0f7dmQqF2F7mf8IkgCa4-o6dd98QFqcj5D9lVKDqVgZgI/s320/Flip+Image.png" alt="ANEH" title="MAHO">

Nah Script Ini Itu Di Simpan Di Atas ]]></b:skin>

Fullnya:

.gambar {-moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYK5jMPASVwtTJ6STnk5bFatSbvQFwD8hFSsaVnU3vbRKZ5VKrVKDrX1gdT3brqPjKDY10w2J5dVTcRtz03lmfEe4b2-Rwo0E0f7dmQqF2F7mf8IkgCa4-o6dd98QFqcj5D9lVKDqVgZgI/s1600/Flip+Image.png" target="_blank"><img class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYK5jMPASVwtTJ6STnk5bFatSbvQFwD8hFSsaVnU3vbRKZ5VKrVKDrX1gdT3brqPjKDY10w2J5dVTcRtz03lmfEe4b2-Rwo0E0f7dmQqF2F7mf8IkgCa4-o6dd98QFqcj5D9lVKDqVgZgI/s320/Flip+Image.png" alt="ANEH" title="MAHO">

Ket.

  Script Di Atas Itu Sudah Mencakup Ke Pada Semua Gambar Pada Blog Kecuali Gambar Pada Widget. Link Yang Berwarna Merah Adalah Link Tujuan Gambar Saat Di Klick, Dan Yang Warna Biru Link Gambarnya. Selamat Mencoba :D