Discussion on Flipping Cards 3D with jQuery/CSS3

Discussion on Flipping Cards 3D with jQuery/CSS3

Cart 514 sales

castleplugins supports this item


This author's response time can be up to 1 business day.

53 comments found.

Love this plugin! I’m having one problem, though. I’ve designed a game with multiple cards that a player can flip. When they flip Card A, flip it back, then flip Card B, the image from the Card A back shows for a second before correctly displaying the back of Card B. How can I prevent this?

You can see this happening here:

any chance you might be using a different plugin for that card? I inspected the modal and your HTML, and I don’t see the HTML for the Flipping Cards plugin in there, I only see the JS and CSS files.

For example the container of this plugin must have a class named “card-container”, but you I don’t see that div anywhere in your page :/

Yikes! I must have done more rewriting than I thought. Thanks so much for looking, David. I will revisit and come back at you if necessary.

don’t worry :)


Can I ad a random element?

Can you specify what kind of random element you are referring?

Best, David

Hi David – Hoping I can run something by you? I just purchased today and have the randomized timing for the flips working fine on desktop. This is pulling the images from a loop in WordPress. When I start scaling for mobile, I’m getting a lot of whitespace between the rows that I can’t figure out how to remove?

Here’s what I’m seeing:

My SCSS is: .row.flipgrid { .card-container { float: left; padding: 0; margin: 0 0 15px 0; width: 14.2857142%; } } And, the loop: <div class="row fullWidth flipgrid"> <div class="small-12 column" style="padding: 0;"> <?php if ( have_rows( 'photo_blocks' ) ) : ?> <?php $delay = 0;?> <?php while ( have_rows( 'photo_blocks' ) ) : the_row(); ?> <div class="card-container"> <?php $delay = mt_rand(1000, 12000);?> <div class="card" data-autoflip="9000" data-start="<?php echo $delay;?>" data-direction="right"> <div class="front"> <img src="<?php the_sub_field( 'bw_photo' ); ?>" class="grid-pic" /> </div> <div class="back"> <img src="<?php the_sub_field( 'color_photo' ); ?>" class="grid-pic" /> </div> </div> </div> <?php endwhile; ?> <?php else : ?> <?php // no rows found ?> <?php endif; ?> </div> </div>

Any thoughts on how to remove that whitespace?

Thank you, Jonathon

Hi Jonathon,
can you show me a living example online? so I can take a look and see what’s going on, you can contact me privately via email here:

Best, David

Hi David

I’m not sure what I did wrong and am hoping you can point me in the right direction.

When I installed your code (flip right) one of the first things that I did was to check to see that it worked on mobile (iPhone) and it worked great. But after I added my own content and styles on rotate the card back displays a reverse of the image I used on the card front. It briefly flashes the content that I created for the back, but that’s reversed also. Note that is works fine on my desktop and on my Kindle Fire—just not on the iPhone.

If you need to see code or the development site let me know the best way to get it to you.

I appreciate any assistance you can offer. Thanks, Tom

I found the problem, try adding this peace of CSS:
.card-container .card>div{
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;
Best, David

David that’s great! It works perfectly now.

I know how difficult it can be to troubleshoot something when it looks fine everywhere except for one platform. Very impressive. It shows how well you understand the products that you create.

Again—thanks for the quick and accurate support. I’ll be sure to give you 5 Stars.

Take care, Tom

Hi Tom,
Awesome, glad that was it, and thank you for your great review I really appreciate it :D
Best Regards, David

Hello can you help please? I just want to have a click button. The button appeared but when I click on it nothing happened? This is the code:

I sent you on private message

lets continue the support via email :D

Hi I have a problem. The Flipping Cards works corretly on Google Chrome, but don´t do the flipping efects on IE 11, whats happend?.

Kind Regards

Hi, Yes indeed, the flipping is not supported by IE, I tried to add it, but I found too many bugs on IE, which causes more harm that good, so I added a fallback of a fade effect instead

that’s why in the “Compatible Browsers” section in the plugin page there’s no mention of IE, and also I mention the fallback in the description: “IE fallback of fade effect”

Best :)

Hello! I have problems with Bootstrap about the width of the card and columns. Can you help me via e-mail? Thanks

Yes of course ;), please send me a message through here: so I can answer you via email

Hello. One question before purchase. On mobile devices (smartphones) the effect on hover does it work? How? Thank you!

the clicking flipping cards work like taps (since it is kind of like the same)
the hover flipping cards works but a little bit different, when you tap them they flip, but you need to tap outside the flipping card to flip it back to the front (it is like the translation of the hover on mobile)
but I guess you could also add a fallback to change from hover to click when it is mobile (with JS) ;)

Best, David

Hello! Thanks for the fast replay David :)

Are card sizes easily editable, and will they still auto stack into the masonry style? In your demo, the area that contains all the boxes is not the size I want. Is that adjustable?

the flipping cards are independent from each other, in other words is not a grid (it will not stack into a masonry style) it looks like a grid because the cards have the same dimensions and they are just float to the left

yes you can change the width and height of each card (via CSS), you can check the source code to see the styling ;)

Best, David

Hi, the flipcard is very good but i have a question:

It’s possible to put more than 2 images inside the box? I mean if i wanna make a rotation of 5/6 diffrent images its that possible? and how?

Thank u so much

this feature is not included in the plugin as it is, I’m guessing it can be done via JS, but you would need to tweak it according to your needs, I’m guessing something similar to this:
     $(this).find('img').attr('src', url);

     $(this).find('img').attr('src', url);
depending on your purpose the url would need to change.
I hope this helps ;)

Best, David

Thank u so much for your quick and usefull help.

Does this work with wordpress? Do you have ‘instructions’ on how to set it up as the live example ( shows?

Thanks so much.

I saw your 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.

Yes, please let me know (step-by-step) how you configured the admin page, etc. Thanks so much.

This is in regards to the wordpress one ($11). thx

Hi, here is how I configured it: you just put the shortcode in your pages/posts and inside the shortcode put any HTML, like text, images, divs, etc


Is there any way to get this thing to be centered on the page and maintain being centered while the browser window is being resized?

I noticed the demo has the same issue where it’s slightly offset to the left. I know that it needs some space to the right when it’s shrunk down, but if you check the demo, anything over 760PX really shows the lack of center alignment.

are you talking about the content inside?
or do you mean all the cards? if so, the plugin is not a grid, it is a flipping 3D card, you can have as many as you want and even float them so they get stacked, but they are independent, so you can put them in a centered container, or anywhere in your page, but the plugin it self is just a flipping card with a static height and width

I hope this make sense
Best castlecode

Hi, I’ve been struggling a bit longer with this than I would like to admit, so I decided it’s better to ask. As a demo I am setting up, I have 2 columns described with div’s with classes of “col-md-6” (using twitter bootstrap). In each of the columns I have 2 content boxes, which for now are identical. The problem is they are all lying on top of each other in their respective columns. What am I missing if I want them to lie underneath each other (as in one content box per row)?

The html for these demo boxes are the following:
  <div class="card-container">
    <div data-direction="right" class="card click">
      <div class="front">
        <div class="content-box box-default">
          <span class="icon-ar icon-ar-lg icon-ar-inverse icon-ar-circle">
            <i class="fa fa-cloud" />
          <h5 class="content-box-title">  Default Box</h5>
          <p>Eveniet quo minima deserunt quisquam libero iste veritatis consectetur nulla.</p>
      <div class="back">
        <div class="content-box box-default">
          <span class="icon-ar icon-ar-lg icon-ar-inverse icon-ar-circle">
            <i class="fa fa-cloud" />
          <h5 class="content-box-title">  Default Box</h5>
          <p>Eveniet quo minima deserunt quisquam libero iste veritatis consectetur nulla.</p>

If you need a description of the content boxes, this is the template I am using Artificual Reason

awesome :D glad to hear it, the JS Fiddle solution would be awesome so we all can benefit from it ;)

No problem, here it is JS Fiddle. Not sure how long you want me to keep the JS Fiddle up for as it shows the code I purchased (I wasn’t sure how to add the code files as private resources).

ohh alright, now I got it, since you didn’t specify a manual width and height (with pixels) the flipping cards didn’t get any dimensions, removing the position absolute make the flipping cards dimensions variable to the content, make sense ;) thank you for the example, and you are right, you can remove it now since it shows the source code :)

Fancy to buy this item, but …. not working in (latest) Opera, just see the fallback fade animation. Is this a known issue?

On Chrome: As long as i DON’T move the mouse over the middle of the item (eg. for example moving mouse from right-to-left) the flipping is not completed: it just stutters, (half) flipping back and forward. Known issue?

Working on W7, PC

This seems a most promising plugin, but in real life, not really working?

Curious to your experience.

Hi, hmm this means that the backface visibility is not supported by the opera version you got, are you sure v12 is the latest for Windows? in MAC they are in v26

heh … uninstalled and re-installed Opera, and indeed now version 26 … Guess auto-update was not allowed to pass the firewall, or something. Strange that it still mentioned I was using the last version, though ….

Anyway: all working fine, cards are flipping properly!

Sorry for the mix-up, thank for the support!

Seems to be a problem in the newest update of Chrome. I realllly hope you can fix this:

If on the front card any element has position that is not “static”. (like relative, absolute, etc) then the front side will show through when you flip the card.

There is no problem in other browsers, and this only happens in the VERY latest version of Chrome. Using Chrome Dev tools, I did this in your demo and it breaks it there too.

For my site, I require an element on the front side to have a relative (or absolute) position, so this is really important. Thanks for the great support.

Ohh alright I finally saw it in the live preview (I was testing the latest version on CodeCanyon)

This issue is not happening in the latest version of the plugin but just try adding this peaces of CSS lines in the flipCard.css file:

.card-container .card[data-direction="right"] .front, .card-container .card[data-direction="left"] .front{
    -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
          transform: rotateY(0deg);
I hope this make sense ;)

YES!! Thanks so much. This works. I did update the js file, but not the CSS. This code fixes it and also makes the flip very smooth in Chrome where before it was a bit of a flicker. Thanks so much for your excellent support and excellent script!

Awesome :D glad that was it ;)

Hi David, thanks for the great work. Your script is working great for us, but the I.E. fade fallback is not showing the back of the card. The fade is executed, but the back does not display.

Can you help?

I will need to give you a login to our staging site so that you can see this – if you PM me, I will send you one. Many thanks, Jonathan.

Awesome, thanks you! I’m on holiday now for 10 days (yay!). Will try the code when I’m back in the office and let you know. Thanks again David. Jonathan

alright ;) happy holidays :D

Fixed! thx man :)

I’ve got an image background with overlaid text that I’m trying to get working with the flipper.

When i set the image as a background to the div, it gets flashy and erratic during the flip effect. I’ve seen this before with CSS/JS animations, so no big surprise there.

So my second attempt was to position the image absolutely top:0 left:0, then z-index it below the text which is positioned relatively. This gives the effect I want, and eliminates the flashing and erratic behavior, however the fillper fails to hide the front face of the card, which now shows up backwards and on top of the back face, when it should be showing the back face only.

I’ve spent an hour trying to figure it out, and all I’ve come up with is that its the position:absolute on the image and position:relative on the text that is causing this. If i remove these attributes, it obviously breaks the styling of the card faces, however the content flips properly and hides the front side.

the code:

div class=”front” p style=”position:relative; z-index:1;” /p p style=”position:relative; z-index:1;” /p img style=”position:absolute; z-index:0; top:0; left:0;” /div div class=”back” p style=”position:relative; z-index:1;” /p img style=”position:absolute; z-index:0; top:0; left:0;” /div

I’m also curious if its possible to have the cards flip on a timer as WELL as on click? I’ve got the click class on there, which works, but as soon as I added the data attributes for auto flip, the click doesn’t seem to work any more.

Thanks in advance!

The auto flip combine with the clicking is not yet implemented but sounds like a good future update ;) Best

David, thank for the quick reply. I’ve switched over to using backgrounds and started from a clean-slate with the rest of the styling, and it is working a lot better. There are still certain instances where the animation glitches a little bit (content from the other side flashing in and out), but playing around with the css or swapping the front/back facing content has resolved most of these issues.

hmm are you testing it on FF v30?

Hi David, I got the plugin to work on my clients Wordpress site but there is one little glitch, here’s the site page it’s on:

The issue is the header is scrolling behind the boxes rather then on top of it like the rest of the page. Any ideas how this can be fixed?


Hi, just reduce the z-index of the flipping cards or increase the z-index of your menu, if you want to increase the z-index of the flipping cards you would do it like this:

Also I assume you are talking about the WP version since this is the stand alone version

Worked perfectly! Thank you so much for the fast response! :)

Hello How many image I can put on each card.

You can put anything and any amount of HTML, so you can out any number of images ;)

Almost got the plugin,but I saw that it’s not working on my Android phone, the automatic fliped card work fine but not the other one, too bad.

You can test it on (free for 30 min of use.) use android Galxy S 3 or Galxy Nexus 4.0. It flip but like a miror, the text a the top of the card flip on the bottom of the card, same with the makup of the clickable girl.

Work fine on my real Galaxy S2, the other one I tested its on emulator, so maybe it’s for that.. nice plugin very good job by the way.

yes maybe is for the simulator, it may not have all the CSS3 rules. I tested on a Nexus 7, Nexus 5 and a Moto G in Google Chrome and Dolphin browser, and I couldn’t see the issue that is presented in the simulator :)


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey