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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
/* 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.
|
1 2 3 4 5 6 7 8 |
$(".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 🙂