Flipping Cards 3D with jQuery/CSS3
Collection of Flips and results of playing cards utilizing CSS3 3D and jQuery.
Easy to implement 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.8.3.min.js (written with jquery)
- Simple html markup (all examples are within the index.html file)
further:
- model.css (some random model for the fundamental markup, not wanted)
You can change the size of the playing cards simply by specifying the width and the peak with this peace of css code:
.card-container {
width: 200px;
top: 200px;
}
Change Log
----> Update: Jul 3, 2014 Fixed some points with Firefox v30 ----> Update: Feb 26, 2014 Now you possibly can specify the ratio within the container div like this: data-ratio="1:2" ----> Update: Nov 19, 2013 Now the fallback is suitable with IE 11 ----> Update: October 6, 2013 Fixed some points if you hover over a flipping card when the web page is loading ----> Update: August 6, 2013 (substitute CSS file) Fix some points with the 3D impact on Firefox ----> Update: July 26, 2013 Fixed some console errors on IE ----> Update: May 21, 2013 Fixed some sticking points in firefox for the over flipping playing cards ----> BIG Update: May 6, 2013 Auto Flip Effect is now out there, you possibly can set the time till a card will flip robotically, additionally you possibly can set the time when the cardboard will begin doing the autoflips. (you possibly can see it within the dwell preview) NOTE: if you do a mouseover on a auto flipping card it won't flip as lengthy as you've gotten the mouse over the cardboard Added coloration themes for the flipping playing cards, and you may make your individual. ----> Update: April 28, 2013 Now is suitable with jQuery 1.9.1 ----> Update: April 10, 2013 Added additionally a fallback of a fade impact for browsers that not help CSS3D like previous variations of Chrome and Firefox. ----> Update: Feb 18, 2013 Added a fallback for IE of a fade impact.
