Membalik Kartu 3D dengan jQuery/CSS3

  • Whatsapp
Membalik Kartu 3D dengan jQuery/CSS3

Source Code : Membalik Kartu 3D dengan jQuery/CSS3

Bacaan Lainnya

Membalik Kartu 3D dengan jQuery/CSS3 - 1

Koleksi Flips dan efek kartu menggunakan CSS3 3D dan jQuery.

Mudah diterapkan dengan markup CSS & HTML Anda
Bekerja di semua browser modern (Google Chrome, Safari & Firefox)

Apa yang kau butuhkan:

  • flipCard.css (semua gaya dan efek yang diperlukan untuk membalik kartu)
  • flipCard.js (semua peristiwa yang diperlukan untuk memicu efek)
  • jquery-1.8.3.min.js (ditulis dengan jquery)
  • Markup html sederhana (semua contoh ada di file index.html)

tambahan:

  • style.css (beberapa gaya acak untuk markup dasar, tidak diperlukan)

Anda dapat mengubah dimensi kartu hanya dengan menentukan lebar dan tinggi dengan ketenangan kode css ini:

.card-container {
lebar: 200 piksel;
tinggi: 200 piksel;
}

Ubah Log

----> Update: Jul 3, 2014 
Fixed some issues with Firefox v30

----> Update: Feb 26, 2014 
Now you can specify the ratio in the container div like this: data-ratio="1:2" 

----> Update: Nov 19, 2013 
Now the fallback is compatible with IE 11

----> Update: October 6, 2013 
Fixed some issues when you hover over a flipping card when the page is loading

----> Update: August 6, 2013 (replace CSS file)
Fix some issues with the 3D effect on Firefox

----> Update: July 26, 2013
Fixed some console errors on IE

----> Update: May 21, 2013
Fixed some sticking issues in firefox for the over flipping cards

----> BIG Update: May 6, 2013 
Auto Flip Effect is now available, you can set the time until a card will flip 
automatically, also you can set the time when the card will start 
doing the autoflips. (you can see it in the live preview)
NOTE: when you do a mouseover on a auto flipping card it will not flip as long 
as you have the mouse over the card

Added color themes for the flipping cards, and you can make your own. 

----> Update: April 28, 2013 
Now is compatible with jQuery 1.9.1

----> Update: April 10, 2013 
Added also a fallback of a fade effect for browsers that not support CSS3D like old versions of Chrome and Firefox.

----> Update: Feb 18, 2013
Added a fallback for IE of a fade effect. 

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *