Cara Membuat Animasi Flip Dengan CSS3 dan jQuery

Halo, jumpa lagi dengan saya, baik kali ini saya akan membuat tutorial mengenai Cara Membuat Animasi Flip Dengan CSS3 Dan jQuery, sebenarnya banyak sekali animasi-animasi yang bisa kita gunakan, asal tau cara membuatnya 😀 , Nah bagi yang belum tau khususnya cara membuat animasi Flip, berikut langkah-langkahnya.

Untuk membuat animasi Flip, kita butuh satu buah gambar, silahkan kalian siapkan satu buah gambar bebas, setelah itu silahkan kalian ketikan kode HTML berikut.

<div class="container">
  
  <div class="circle">
    <div class="front">
      <img width="300" height="300" src="http://mrg.bz/NtMdlB">
    </div>
    <div class="back">
      <p>
         Isikan Konten <br> Disini
      </p>
    </div>
  </div>
</div>

Pada bagian img src kalian isikan dengan gambar, selanjutnya kita akan desain tampilan nya dengan kode CSS3 berikut ini.

/* Common Style */
.container{
  width:400px;
  margin: 0 auto;
}
p{
  margin-top:120px;
  font-size:24px;
  font-family:Arial, Helvetica, sans-serif;
}


.circle
{
  position:relative;
  width:300px;
  height:300px;
  background:#e9e9e9;
  /* Create Circle With 50% Rounded */

  -webkit-border-radius:50%;
    border-radius:50%;
   -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
  padding:10px;
  border:2px dashed #808080;
  
  /* Assign the perspective to enable 3d Transform */
  	perspective :600px;
	-webkit-perspective: 600px;
    -moz-perspective: 600px;
  
}

.circle .front img{
  border-radius:50%;
   -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.circle .front
{
  position:absolute;
  z-index:9;  
 
  /* Assign The 3D Transform */
 -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    
  /* Transition Effect */
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}
/* .flipping class for flip effect using jquery */

.circle.flipping .front
{
  z-index:9;
  -webkit-transform:rotateX(180deg);
  -moz-transform:rotateX(180deg);
}


.circle .back
{
  position:absolute;
  width:300px;
  height:300px;
  background:#929292;
  overflow:hidden;
  text-align:center;
  z-index:8;
  /* Create Circle With 50% Rounded */
  border-radius:50%;
  -webkit-border-radius:50%;
   -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
  
  /* Assign The 3D Transform */
    -webkit-transform:rotateX(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform:rotateX(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
  
  /* Transition Effect */
  transition:all .2s ease-in-out;
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
}

.circle.flipping .back
{
  z-index:10;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform:rotateX(0deg) rotateY(0deg);
}

Kemudian yang terakhir tambahkan kode Javascript berikut untuk membuat fungsi animasi nya.

$(".circle").hover(function(){
     // if mouse hover then add .flipping class
    $(this).addClass("flipping");
  
},function(){
    // if mouse unhover then remove the .flipping class
    $(this).removeClass("flipping");
});

Oke, kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai

Baik itulah tutorial Cara Membuat Animasi Flip Dengan CSS3 Dan jQuery, semoga bermanfaat, amin. Selamat mencoba 🙂