Home / Premium Pro Plugins / Flipping Cards 3D with jQuery/CSS3

Flipping Cards 3D with jQuery/CSS3

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)


Assortment of Flips and results of playing cards utilizing CSS3 3D and jQuery.
Straightforward to implement along with your CSS & HTML markup
Works in all trendy browsers (Google Chrome, Safari & Firefox)

what you want:

  • flipCard.css (all of the model and results wanted to flip playing cards)
  • flipCard.js (all of the occasions wanted to set off the consequences)
  • jquery-1.eight.three.min.js (written with jquery)
  • Easy html markup (all examples are within the index.html file)


  • model.css (some random model for the essential markup, not wanted)

You possibly can change the size of the playing cards simply by specifying the width and the peak with this peace of css code:

width: 200px;
top: 200px;

Change Log

----> Replace: Jul three, 2014 
Fastened some points with Firefox v30

----> Replace: Feb 26, 2014 
Now you'll be able to specify the ratio within the container div like this: data-ratio="1:2" 

----> Replace: Nov 19, 2013 
Now the fallback is appropriate with IE 11

----> Replace: October 6, 2013 
Fastened some points once you hover over a flipping card when the web page is loading

----> Replace: August 6, 2013 (substitute CSS file)
Repair some points with the 3D impact on Firefox

----> Replace: July 26, 2013
Fastened some console errors on IE

----> Replace: Might 21, 2013
Fastened some sticking points in firefox for the over flipping playing cards

----> BIG Replace: Might 6, 2013 
Auto Flip Impact is now out there, you'll be able to set the time till a card will flip 
robotically, additionally you'll be able to set the time when the cardboard will begin 
doing the autoflips. (you'll be able to see it within the reside preview)
NOTE: once you do a mouseover on a auto flipping card it is not going to flip as lengthy 
as you've the mouse over the cardboard

Added colour themes for the flipping playing cards, and you may make your individual. 

----> Replace: April 28, 2013 
Now's appropriate with jQuery 1.9.1

----> Replace: April 10, 2013 
Added additionally a fallback of a fade impact for browsers that not help CSS3D like previous variations of Chrome and Firefox.

----> Replace: Feb 18, 2013
Added a fallback for IE of a fade impact. 


Check Also


Double Colors

DOWNLOAD It’s countless recreation. You want faucet for rotate blocks. Contact similar colours! Watch video ...


Love Calculator

DOWNLOAD Love calculator is a enjoyable software the place buddies and can calculate the share ...