Pada kesempatan ini seocips.com akan membagikan tutorial tentang cara membuat efek Flipping Content pada gambar di blog menggunakan CSS. Disini saya menggunakan gambar sebagai contoh. Efek CSS ini hampir mendukung banyak browser versi terbaru seperti chrome, firefox, safari, ie 10 juga iPad, iPhone dan iPod Touch kecuali opera.

Live Demo Flipping Content Pada Gambar

Untuk demonya, Arahkan kursor mouse ke gambar dibawah ini :
contoh  Efek Flipping Content Pada Gambar Blog
contoh  Efek Flipping Content Pada Gambar Blog





Cara Membuat Efek Flipping Content Pada Gambar

Untuk membuatnya berikut ini adalah Cara Membuat Efek Zoom Berputar Pada Gambar di Blog:
1) Masuk ke dashboard blogger lalu klik Template
2) Cari ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). 
3) Pastekan CSS di bawah ini di atas ]]></b:skin> atau </style>
.container-card { position:relative; height:300px; width:300px; margin:20px auto; }
.container-card > div { position:absolute; left:0; top:0; width:300px; height:300px; padding:20px; background:#3C404B; -webkit-transition:1.5s ease-in-out; -moz-transition:1.5s ease-in-out; transition:1.5s ease-in-out; }
.container-card > div.back { background:#000; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg); }
.container-card > div.front { -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.container-card:hover > div.back { -moz-transform:perspective(800px) rotateY(0); -webkit-transform:perspective(800px) rotateY(0); transform:perspective(800px) rotateY(0); -webkit-box-shadow:5px 5px 5px #aaa; -moz-box-shadow:5px 5px 5px #aaa; box-shadow:5px 5px 5px #aaa; }
.container-card:hover > div.front { -webkit-transform:perspective(800px) rotateY(-179.9deg); -moz-transform:perspective(800px) rotateY(-179.9deg); transform:perspective(800px) rotateY(-179.9deg); }
4) Untuk menerapkannya pada postingan blog contohnya adala kode di bawah ini, dalam mode HTML postingan.
<div class="container-card">
<div class="front">
<img src="http://1.bp.blogspot.com/-oGRJHBSScqg/VTdDwODWsSI/AAAAAAAAEdY/XZDBGghMxow/s1600/test.jpg"/>
</div>
<div class="back">
<img src="http://1.bp.blogspot.com/-BYFBNeGTU9c/VTdD2fGUX3I/AAAAAAAAEdg/fBxoqDknb6o/s1600/test.jpg" />
</div>
</div> 
Ganti kode berwarna biru diatas dengan url/link gambar pada bagian depan dan ganti kode berwarna merah diatas dengan url/link gambar pada bagian belakang. Sekian dan selamat mencoba.
5 Komentar untuk "Membuat Efek Flipping Content Pada Gambar Blog"

mkasih gan ,,, postingan membuat-efek-flipping-conten , yang bagus dan bermanfaat ini layaknya di share ajja ,, nih saya bantu ngeshare ,, ,, jgn lupa kunbal nya pulsagratisandroidku.blogspot.com terimakasih skali lagi gan , maju terus blog nya ,,, !

SUPER TUTORIAL !!!!!!!!!!!! Keren abis SEOCIPS ! sy selalu buka disini ...selalu ada hal yg baru !!! Thank You Gan !!!!! suksessssssssss.......!

cara biar backgroundnya sama besar sama gambarnya gimana min?

Atur ukuran kedua gambar sama besar :)