Flipping Cards 3D with jQuery/CSS3

Flipping Cards 3D with jQuery/CSS3

Collection of Flips and effects of cards using CSS3 3D and jQuery.
Easy to implement with your CSS & HTML markup
Works in all modern browsers (Google Chrome, Safari & Firefox)


what you need:

  • flipCard.css (all the style and effects needed to flip cards)
  • flipCard.js (all the events needed to trigger the effects)
  • jquery-1.8.3.min.js (written with jquery)
  • Simple html markup (all examples are in the index.html file)

extra:
  • style.css (some random style for the basic markup, not needed)

You can change the dimensions of the cards just by specifying the width and the height with this peace of css code:
.card-container {
width: 200px;
height: 200px;
}

Change Log

----> Update: Jul 3, 2014 
Fixed some issues with Firefox v30

----> Update: Feb 26, 2014 
Now you can specify the ratio in the container div like this: data-ratio="1:2" 

----> Update: Nov 19, 2013 
Now the fallback is compatible with IE 11

----> Update: October 6, 2013 
Fixed some issues when you hover over a flipping card when the page is loading

----> Update: August 6, 2013 (replace CSS file)
Fix some issues with the 3D effect on Firefox

----> Update: July 26, 2013
Fixed some console errors on IE

----> Update: May 21, 2013
Fixed some sticking issues in firefox for the over flipping cards

----> BIG Update: May 6, 2013 
Auto Flip Effect is now available, you can set the time until a card will flip 
automatically, also you can set the time when the card will start 
doing the autoflips. (you can see it in the live preview)
NOTE: when you do a mouseover on a auto flipping card it will not flip as long 
as you have the mouse over the card

Added color themes for the flipping cards, and you can make your own. 

----> Update: April 28, 2013 
Now is compatible with jQuery 1.9.1

----> Update: April 10, 2013 
Added also a fallback of a fade effect for browsers that not support CSS3D like old versions of Chrome and Firefox.

----> Update: Feb 18, 2013
Added a fallback for IE of a fade effect. 

Go to Download Back to Blogs
SSL Fixing

Ensure the security of your website with our professional SSL fixing service.

Start from $5 USD
WordPress Setup & Deployment

Get your WordPress website set up and deployed with ease.

Start from $7 USD
Customer Website in Laravel

Custom Laravel development tailored to your business needs.

Start from $500 USD
WordPress Website Development

Complete WordPress website development with themes and plugins.

Start from $100 USD
E-commerce Website Development

Build your online store with custom e-commerce solutions.

Start from $700 USD
Website Maintenance

Keep your website updated and running smoothly with our maintenance services.

Start from $30 USD/month
SEO Optimization

Improve your website's visibility and search engine rankings with our SEO services.

Start from $150 USD
Upwork Profile
Profile Image

Hi, I'm Tarun, a Full-Stack Developer and Ethical Hacker with over 4 years of experience. I specialize in TOR network services, web development, and cybersecurity.

View My Upwork Profile