Cara Membuat Animasi Flip Card dengan CSS3 dan jQuery

Pada artikel ini akan saya kasih tutorial lagi buat kalian yang sedang belajar atau yang ingin membuat sesuatu animasi yang baru dengan menggunakan jQuery, animasi apa ? yups, yakni kita akan membuat animasi flip card dengan CSS3 dan jQuery. Mungkin diantara kalian ada yang sudah pernah membuat aniamsi seperti flip card dan lain sebagainya, tapi tidak ada salahnya kita membuat dengan caara yang baru tetapi dengan hasil yang serupa. Baiklah langsung saja kita praktikan cara membuat animasi flip card berikut ini.

Untuk membuat animasi flip card, hal pertama adalah kita akan membuat struktur HTML5 untuk objek flip card nya, pada kasus ini animasi flip card menggunakan objek warna pada sebuah kotak berwarna, silahkan ketikan kode HTML berikut ini.

<body>
    <section class="wrapper">
        <div id="box">
          <figure class="depan">1</figure>
          <figure class="belakang">2</figure>
        </div>
    </section>
</body>

Setelah kita membuat struktur seperti diatas, langkah selanjutnya kita akan membuat desain dari objek flip card nya yakni dengan kode CSS3 berikut ini.

figure {
  margin: 0;
}

code {
  font-family: 'Monaco', 'Menlo', monospace;
}

.wrapper {
      width: 200px;
      height: 260px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }

    #box {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }

    #box.flipped {
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

    #box figure {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    #box .depan {
      background: #3498db;
    }

    #box .belakang {
      background: #f39c12;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }

Langkah terakhir untuk memyempurnakan animasi nya supaya berfungsi, kita akan tambahkan kode jQuery berikut ini.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("#box").hover(function(){
        $("#box").toggleClass("flipped");
      });
    });
</script>

Setelah semua kode diatas telah diketikan, simpan filenya kemudian silahkan buka pada browser masing-masing dan lihat hasilnya. Maka akan terlihat objek kotak berwarna, dan jika kita arahkan kursor terhadap objek tersebut, maka akan secara ototmatis terjadi animasi flip card nya.
Bagaimana, cukup bagus bukan animasi nya ? untuk objek nya kalian bisa menggunakan gambar atau lain sebagainya, silahkan untuk dikreasikan sendiri. Baiklah cukup sekian tutorial sederhana mengenai bagaimana cara membuat animasi flip card dengan CSS3 dan jQuery, semoga bermanfaat dan selamat mencoba.

22 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat