Menu


Menu Tab

Pages

Showing posts with label Card Flip. Show all posts
Showing posts with label Card Flip. Show all posts

Card Flip

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
Login ke akun blog klik entri halaman baru HTML
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>
Penjelasan :
Ganti Link dan edit kode yang di warnai 
Sumber by. Codepen
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi