Buat Animasi Kartu Flip 3D CSS pada Hover

Ide untuk membuat ini Animasi kartu flip 3D sangat mirip dengan apa yang telah kita lakukan di tutorial CSS sebelumnya CSS Flip Animation on Hover.

Tapi di sini kita akan membuatnya vertikal & menambahkan efek 3D yang bagus. Kami telah membuat dua jenis efek flip hover 3D yang berbeda.

Yang pertama membalik kotak dari atas ke bawah, sedangkan yang lain, akan membalik dari bawah ke atas saat mengarahkan mouse ke kotak div.

Saat Anda mengarahkan kursor ke kotak, Anda akan menemukan tampilan efek animasi 3D. Kedua kotak memiliki bagian depan dan belakang untuk menambahkan konten, tautan, dan gambar, dll.

Untuk membuat efek kartu flip, kita akan menggunakan transformasi CSS dan elemen transisi.

Kartu Flip adalah cara yang bagus untuk menampilkan informasi kepada pengguna situs Anda. Dibutuhkan lebih sedikit ruang dan sangat berpengaruh di zaman modern pengembangan web.

Ini juga menyediakan beberapa interaktivitas dan melibatkan pengguna. Kartu flip adalah beberapa gambar di sisi depan dan beberapa konten di bagian belakang kartu.

Kami membutuhkan dua div berbeda di dalam pembungkus utama, tetapi konten atau elemen yang Anda putuskan semuanya terserah Anda. Mari kita lihat kedua efek flip CSS.

Struktur HTML untuk Flip Card

Markup kami untuk membuat efek balik sangat mudah dipahami. Seperti yang saya katakan di atas, kami memiliki satu wadah utama dan dua div anak.

Setiap div akan masing-masing untuk sisi depan dan belakang.

<div class="flipbox flipTop">     <div class="FrontSide">         <span>This is Front Side of Flip Card</span>     </div>     <div class="BackSide">       <span>Your content here.</span>     </div> </div> 

Satu-satunya hal yang perlu Anda ingat untuk mengubah kelas flipTop ke flipBottom untuk mendapatkan efek flip-bottom.

<div class="flipbox flipBottom">     <div class="FrontSide">         <span>This is Front Side of Flip Card</span>     </div>     <div class="BackSide">       <span>Your content here.</span>     </div> </div> 

Gaya CSS untuk Animasi Flip Card

Pertama-tama, kita perlu mengerjakan pembungkus utama kotak flip. Kami mengatur lebar dan tinggi kotak kami sesuai kebutuhan kami.

Ingat jika Anda mengubah ketinggian di sini, Anda juga harus bermain dengan kelas lain untuk mengubah properti.

Kami dulu transisi dan transform-style: preserve-3d;

 .flipbox {   width: 450px;   height: 200px;   text-align: center;   margin: 0 auto;   -webkit-transition: all 350ms ease;   -moz-transition: all 350ms ease;   -o-transition: all 350ms ease;   transition: all 350ms ease;   -webkit-transform-style: preserve-3d;   -moz-transform-style: preserve-3d;   -o-transform-style: preserve-3d;   -ms-transform-style: preserve-3d;   transform-style: preserve-3d; } 

Hal berikutnya untuk melihat bagian depan & belakang, jadi kami menambahkan beberapa transisi di sini juga. Kami juga melakukan beberapa gaya umum seperti menambahkan beberapa warna latar belakang, dll.

 /* Front - Back */ .flipbox .FrontSide, .flipbox .BackSide {   background: #66CC99;   font-size: 16px;   text-transform: uppercase;   color: #fff;   line-height: 200px;   -webkit-transition: background 350ms ease;   -moz-transition: background 350ms ease;   -o-transition: background 350ms ease;   transition: background 350ms ease; } 

Frontside harus memiliki transform: translateZ (100px); dan saat melayang kami menambahkan warna latar belakang.

 /* Front Side Face */ .FrontSide {   -webkit-transform: translateZ(100px);   -moz-transform: translateZ(100px);   -o-transform: translateZ(100px);   -ms-transform: translateZ(100px);   transform: translateZ(100px); } .flipbox:hover .FrontSide {   background: #27AE60; } 

Namun untuk bagian belakang, kita tidak perlu menambahkan transform karena kita hanya perlu mengubah bagian depan flip card.

 /* Back Side */ .flipbox .BackSide {   background: #27AE60; } 

Sekarang kita selesai dengan semua gaya dasar dan umum dari kartu flip. Kita hanya perlu menambahkan CSS untuk mendapatkan hasilnya. Berikut adalah contoh kode efek Flip to top.

 /* flip to top*/ .flipTop .BackSide {   -webkit-transform: rotateX(90deg) translateZ(250px);   -moz-transform: rotateX(90deg) translateZ(250px);   -o-transform: rotateX(90deg) translateZ(250px);   -ms-transform: rotateX(90deg) translateZ(250px);   transform: rotateX(90deg) translateZ(250px); } .flipbox.flipTop:hover {   -webkit-transform: rotateX(-89deg);   -moz-transform: rotateX(-89deg);   -o-transform: rotateX(-89deg);   -ms-transform: rotateX(-89deg);   transform: rotateX(-89deg); } 

jika Anda ingin mendapatkan efek 3d bawah, maka Anda harus mengikuti CSS.

 /* flip to bottom*/ .flipBottom .BackSide {   -webkit-transform: rotateX(-90deg) translateZ(-100px);   -moz-transform: rotateX(-90deg) translateZ(-100px);   -o-transform: rotateX(-90deg) translateZ(-100px);   -ms-transform: rotateX(-90deg) translateZ(-100px);   transform: rotateX(-90deg) translateZ(-100px); } .flipbox.flipBottom:hover {   -webkit-transform: rotateX(89deg);   -moz-transform: rotateX(89deg);   -o-transform: rotateX(89deg);   -ms-transform: rotateX(89deg);   transform: rotateX(89deg); } 

Dan itu sudah berakhir! Kami mencoba untuk membahas beberapa fitur bagus dari transformasi dan transisi CSS3. Anda dapat melihat demo animasi flip dan mendownload sumbernya dengan mengklik link di atas.

Jika Anda memiliki pertanyaan, komentar, atau ingin berbagi umpan balik, maka Anda dipersilakan. Anda dapat meninggalkannya di bagian komentar di bawah.