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.
<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 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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
