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:
----> 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.