Flipping Card 3D with jQuery, Javascript/CSS3



FlipCard.js implements card filpping animation with jquery, javascript, css3 and html5. It’s fully customizable with either html5 “data-*” attributes or options in javascript. It also supports all modern browsers which including chrome, firefox, safari, opera, and IE7+.

Table of Contents

what you need:

  • flipCard.css (style needed to flip cards)
  • flipCard.js (javascript events and apis to trigger the effects)
  • jquery-1.7.0.min.js or above
  • Simple html markup (all examples and documents are in the app.html file or go online FlipCard.js examples and documents)

Change Log

v1.3.0 (Dec 14, 2014)

* add a new feature flipOnHover to trigger flipping when mouse hovers in and out the card. Set flipOnHover: "true" in the options to do that.

v1.2.0 (Apr 10, 2014)

* Add a fallback of jquery fadeIn effect for browsers which don't support CSS 3D feature, like IE7,IE8,IE9.

v1.1.2 (Feb 06, 2014)

* Add a new feature to allow flipping card always in one direction. set alwaysOneDirection: "true" in the options to do that.


v1.1.1 (Nov 24, 2013)

* Fixed problem on detecting IE11 (since user-agent has been changed)


v1.1 (Oct 12, 2013)

* Big updates and fixes for IE 10


v1.0 (Oct 7, 2013)

* Initial Release

Products sold on Codecanyon:

Company Website:

Other Websites:



Please enter your comment!
Please enter your name here