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 fashionable browsers (Google Chrome, Safari & Firefox)
what you want:
- flipCard.css (all of the type 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)
- Easy html markup (all examples are within the index.html file)
additional:
- type.css (some random type for the fundamental markup, not wanted)
You’ll be able to 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;
peak: 200px;
}
Change Log
----> Replace: Jul 3, 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 suitable with IE 11 ----> Replace: October 6, 2013 Fastened some points whenever 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: Could 21, 2013 Fastened some sticking points in firefox for the over flipping playing cards ----> BIG Replace: Could 6, 2013 Auto Flip Impact is now obtainable, 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 stay preview) NOTE: whenever you do a mouseover on a auto flipping card it is not going to flip as lengthy as you might have the mouse over the cardboard Added shade themes for the flipping playing cards, and you can also make your individual. ----> Replace: April 28, 2013 Now's suitable with jQuery 1.9.1 ----> Replace: April 10, 2013 Added additionally a fallback of a fade impact for browsers that not assist CSS3D like previous variations of Chrome and Firefox. ----> Replace: Feb 18, 2013 Added a fallback for IE of a fade impact.
