CSS Flip Card Effect 

how to make it responsive?

Awesome effect but when I hover my text gets reverse... Even if I copy your code here, plz help me understand why and how I can fix it

Thanku for giving this code i like it.... G@@d

Bonjour c'est pas possible de nous faire la vidéo en francais s'il vous plait merci

thank you

Thanks very much for your comments; made my day!

yes that fallback should’ve been included. Thanks for sharing mate :)

You are my hero dude. Thank you. Almost get crazy :D

Hi Alex - You’re very welcome. I’m glad the tutorial helped and thanks very much for your amazing comment. Absolutely made my day :D cheers

Hi Julia, glad it worked for you! Please let me know if you have any questions. Cheers!

Thank you for your very kind words; made my day :D. Glad you found the tutorial useful!

@@ArjunKhara Yes thank you very much, your tutorial was very helpfu🤓l, I wish you further success; and more subscribers in the near future, and with the way you handle things I believe that it is possible. 😀

@@ArjunKhara Yes thank you very much, your tutorial was very helpfu🤓l, I wish you further success; and more subscribers in the near future, and with the way you handle things I believe that it is possible. 😀

@@steevoni1 Thank you so much! :)))

Haha thanks very much! This totally made my day :)

Gonzalo Rodriguez - excellent suggestion. I’ll mention this comment in the next related video. Thanks mate :)

thanks

perspective or perspective origin? or both

Thanks very much - this is such a nice comment :)

Cheers Ivan, that's a great fix. Thanks for the solution :)

Thank you for your kind words. Made my day! Glad you liked the tutorial :)

No worries, glad it helped :)

Thanks very much! :)

No worries, glad you found it useful. Please let me know if you have any further questions :) Cheers!

@@ArjunKhara oh, thanks, yes, i have another question,..I'd like to create about 5 or more cards in one page, what i must do?

@@karincentenaro356 That would be similar to the demo in the video. An easy way would be to create a div with either flex or grid as the display; this div would be a container. Then, within this container div create five internal divs, one to hold each of the cards. Finally, in each of these five internal divs simply copy-paste the entire flip card code. Give it a shot a see how it goes. Cheers!

Thanks :)

Thanks for your kind words :) glad it helped. The music is from RU-vid's creator library. Track 1 is Pas De Deux, and Track 2 is End of Summer.

@@ArjunKhara Wow that was quick; thank you again señor!

Thanks very much! :)

Thanks very much! Glad you found it useful :)

As in have an image in the front or back of the card? If that's your question then yes, definitely. Just fill the card with a background image and set the background-size to cover. (Sorry if I've misunderstood your query).

Hi David, if you'd like an image for the front of the card, you can simply swap out the current background (which is #ffc728) to an image URL. I have copied and pasted the entire code below, and marked where the image URL goes. Also note you need to have the background-size: cover; property-value pair if you want the image to fill the background. Remember that large image file sizes do affect loading and animation speeds. You can see at www.qc.sg/workshops/ that I've used images for all of the flip cards. (You need to be on desktop mode to see these, as I've disabled the div on mobile devices for faster loading). CSS Card Flip body{ background: #3C5377; } /* THE MAINCONTAINER HOLDS EVERYTHING */ .maincontainer{ position: absolute; width: 250px; height: 320px; background: none; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* THE CARD HOLDS THE FRONT AND BACK FACES */ .thecard{ position: relative; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; transform-style: preserve-3d; transition: all 0.8s ease; } /* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */ .thecard:hover{ transform: rotateY(180deg); perspective: 1000px; } /* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */ .thefront{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; backface-visibility: hidden; overflow: hidden; /* IMAGE FOR THE FRONT OF THE CARD */ background: url('upload.wikimedia.org/wikipedia/commons/6/65/Thorn_Tree_Sossusvlei_Namib_Desert_Namibia_Luca_Galuzzi_2004.JPG'); background-size: cover; color: #000; } /* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */ .theback{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; backface-visibility: hidden; overflow: hidden; background: #fafafa; color: #333; text-align: center; transform: rotateY(180deg); } /*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */ .thefront h1, .theback h1{ font-family: 'zilla slab', sans-serif; padding: 30px; font-weight: bold; font-size: 24px; text-align: center; } .thefront p, .theback p{ font-family: 'zilla slab', sans-serif; padding: 30px; font-weight: normal; font-size: 12px; text-align: center; } /*This block (ends here) is merely styling for the flip card, and is NOT an essential part of the flip code */ Front of CardThis is the front of the card. It contains important information. Please see overleaf for more details. Back of CardYour use of this site is subject to the terms and conditions governing this and all transactions. Submit

Arjun Thank you so much for your help Much appreciated I really enjoyed watching your tutorial easy to follow a brilliant tutor . Perhaps you would consider making a video on turning this card flip into a coverflow so two images could be shown as it flips around Thanks once again Regards David

haha glad you enjoyed :)

Hi, both work hand in hand. Preserve-3d tells the browser that the *children* of the element need to be positioned in 3d space. In other words, perspective-3d sets up the elements to behave as though they were in 3d space. Perspective, on the other hand, *affects the intensity* of how elements will behave in 3d space. Perspective does this by determining how much the z axis (the 3d axis) should move to and away from the user to provide the 3d effect. So in a raw nutshell, preserve-3d sets up the 3d playground for the elements, then perspective tells the elements how they should play in that playground. Hope this helps!

Hi Joseph, flickering is most likely caused by backface-visibility (-webkit-backface-visibility) issues on hover. Try copying the code exactly as-is and use Chrome to see the results. in most cases it should be fine. If the flickering persists then please post your code and we can take a look and figure it out. Cheers!