Flipping Cards 3D – WordPress

  • Colection of Flips and Effects of cards using CSS 3D and jQuery.
  • Easy to implement with your WordPress.
  • Works in all modern browsers (Google Chrome, Safari, Firefox).
  • IE fallback of fade effect.

Add a Flipping card to your posts or pages with this shortcode:

[flippingCard]
[fc_front]
    HERE GOES THE HTML FOR THE FRONT PART OF THE FLIPPING CARD
[/fc_front]
[fc_back]
    HERE GOES THE HTML FOR THE BACK PART OF THE FLIPPING CARD
[/fc_back]
[/flippingCard]

Note: If you would like to know how I configure the admin page and customize the flipping cards in the live preview, contact me via email and I will show you all I did.

You can edit a single Flipping Card by passing parameters, these are all the parameters available:

[flippingCard direction="right" type="over" float="left" margin="0 10px 10px 0" 
width="300px" height="300px" border="1px solid gray" borderradius="10px" 
background="white" padding="20px" textalign="center" ratio="1:2"]

Change Log

----> Update: March 19, 2021
Fixed compatibility issues with latest versions of jQuery
Updated the components

----> Update: December 13, 2018 
Now compatible with WP 5

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

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

----> Update: Dec 17, 2013 
Fixed some issues with some themes that were putting the images upside down

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

----> Update: October 10, 2013 
Fixed some issues with the fallback with some themes!

----> 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 8, 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 an auto flipping card it will not flip as long 
as you have the mouse over the card

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

----> Update: April 10, 2013 
Fixed some IE issues

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

----> Update: Feb 28, 2013
Add a feature that allow you to add third-party shortcodes inside the flipping card

Configuration: here