Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery

Animasi flip box merupakan sebuah animsi yang cukup menarik untuk kita terapkan pada website, kita bisa terapkan pada element berupa konten. tidak hanya dengan box atau kotak kita bisa membuat animasi tetapi juga bisa dengan element yang lain, bisa dengan gambar ataupun element yang lain nya. Berikut ini akan saya bahas tutorial mengenai bagaimana Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery.

Pada contoh kasus dibawah ini adalah kasus sederhana animasi berupa box, untuk membuat animasi ini kita akan dibantu dengan sintak jQuery untuk animasi yang akan dijalankan. Baiklah langsung saja kita praktekan.

Langkah pertama kita buat struktur HTML dan membuat konten untuk isian box nya dengan sintak HTML berikut.

<body>
	<div class="wrapper">
		<section id="cardlist">
		  <div class="card reverse">
		    <div class="front">
		       <h2>What is Lorem Ipsum?</h2>
		      <button>Read More</button>
		    </div>
		    <div class="back">
		      <p><strong>Lorem Ipsum</strong>
		        <br />
		        <br />Lorem Ipsum is
		        <br />simply dummy text of the
		        <br />printing and typesetting
		        <br />Lorem Ipsum has been the industry's
		        <br />standard dummy text ever
		        <br />since the 1500s,
		        <br />when an unknown printer
		        <br /><br />
		        and many more!!
		      </p>
		    </div>
		  </div>
		</section>
	</div>
</body>

Setelah membuat struktur seperti diatas, kita akan desain struktur diatas dengan sintak CSS3 untuk membuat sebuah kotak box dan yang lain-lain nya, ketikan sintak CSS3 berikut.

.wrapper {
	width: 600px;
	margin:auto;
}
#cardlist {
  width: 300px;
  height: 300px;
  position: relative;
  -webkit-perspective: 800;
  margin-left: 150px;
}

.card {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
}

.card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}

.card .front {
  background: #34495e;
}
.card .back {
  background: #ecf0f1;
  -webkit-transform: rotateY(180deg);
}


.card.reverse {
  -webkit-transform-origin: right center;
}
.card.reverse.flipped {
   -webkit-transform: translateX(-100%) rotateY(-180deg);
}

.card {
  font-family: 'Lato', sans-serif;
  text-align: center;
}
.card div {
  border-radius: 10px;
  box-shadow: 0 0 8px #000;
}
h2 {
  text-align: center;
  color: #fff;
  font-weight: normal;
  margin-top: 100px;
}
button {
  padding: 5px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 14pt;
  font-weight: 300;
  font-family: 'Lato';
}
p {
  padding: 15px 25px;
  text-align: left;
  opacity: 0;
  position: absolute;
  top: 0;
  left: -30px;
  -webkit-transition: 1s;
  -webkit-transition-delay: 0.4s;
}
.card.flipped p {
  opacity: 1;
  left: 0;
}

Selanjutnya adalah kita akan membuat sintak jQuery untuk animasi flip box nya, berikut sintak jQuery sederhana.

$(document).ready(function() {
  $('.card').hover(function() {
    $(this).addClass('flipped');
  }, function() {
    $(this).removeClass('flipped');
  });
});

Setelah semua sintak diatas diketikan simpan file dengan format .html kemudian buka dibrowser masing-masing dan lihat hasilnya. Selesai

Baiklah itu tadi tutorial sederhana mengenai bagaimana Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery. semoga bermanfaat..

DEMO

Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery

Kategori