Memasang kode Card Flip, kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini akan berputar ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
gambar yang ada pada kode ini akan berputar ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
body {
font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 0;
}
.card-container {
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card {
height: 300;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 400;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back {
background: #000;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
</style>
<div class="card-container">
<div class="card">
<div class="side">
<img src="http://Link Gambar.gif" alt="Myscript2010">
</div>
<div class="side back">
<a href="http://Your Link"><b>Your Text</b></div>
</div>
</div>
body {
font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
margin: 12px 0;
}
.card-container {
cursor: pointer;
height: 150px;
perspective: 600;
position: relative;
width: 150px;
}
.card {
height: 300;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 400;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.card .back {
background: #000;
color: #0087cc;
line-height: 150px;
text-align: center;
transform: rotateY(180deg);
}
</style>
<div class="card-container">
<div class="card">
<div class="side">
<img src="http://Link Gambar.gif" alt="Myscript2010">
</div>
<div class="side back">
<a href="http://Your Link"><b>Your Text</b></div>
</div>
</div>
Penjelasan :
Ganti Link dan edit kode yang di warnai
Ganti Link dan edit kode yang di warnai
Sumber by. Codepen
Edited by. Myscript2010
Edited by. Myscript2010