Here is the code snippet for this tutorial on CSS flip cards. Feel free to customise the code and content for your projects. 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); } /* 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; background: #ffc728; 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

WTF. In 6 minutes everything explained. And then the sandwich example. Wow respect. Perfect explained.

This tutorial is gold. Not only it shows you how to achieve the desired effect in a straight to the point way, but it then takes the time to explain how everything works and why! Thank you for making this

that's called the way of explaining things perfectly, Respect you to provide the quality content

I just got it and I hope I can make you guys get this as well. So the key is the backface-visibility, the transform for the back, and the pseudoclass. Basically, what he is doing is he is creating two faces and having them be invisible when either one is on their back. By having theback be flipped at the beginning, the front is visible and the back is not (which is why we don't need to worry about z-index!) So, every time the hover psuedoclass is called (basically means that when you hover over a class, something will happen), one of the cards will be flipped invisible and the other one will be flipped visible!

Finally! An easy-to-understand tutorial that gets straight to the point and it works

Awesome video. Just remember for Safari to also include: -webkit-backface-visibility: hidden;

Thank you, Arjun. I have struggled to get this great feature to work for days... until I found your channel. Now I have a prettier website. Have a great day!

Tried to make it work with other videos too but yours is the only video that actually helped me!!! Thank you !!

Hello Dear, Your coding skills and experience are great. Welcome, Viewers Arjun Khara is doing a difficult thing in a easy way. Thanks, Thank, Thanks a lot Arjun Khara 🤩🤩

I have only admiration for your work, the way you explain and the way you show all posibilities of which would and wouldn't work, you are amazing and help loads building up own logic ! I wish you would have invested more time into this.

I am watching this video in 2021 but i have never watched a video of explanation like that great job

"...and CSS you next time" i just had to give you a like for that alone

This can't be more easier than this great explanation sir thank you helps a lot ♥️

Had been banging my head onto every YT tutorial to create a flip card.... And this is the Best and Easiest so far .... LiferSaver ..... Thanks Man for this .... Keep Going!!!

Clear, simple and all that is possible because of your awesome step by step explanation thank you for this tutorial and the hard work you put into editing this video for your viewers.

The best explanation I found.

Thank you for the explanations. Really makes the tutorial easy to understand and follow.

I'm 5 years late but this is really good tutorial! thank you

This is a fantastic tutorial. After watching several tuts of flipping cards your explanation put it all together for me. I really appreciate it!

great tutorial, after looking at lots of different resources I still felt a bit stumped, but after watching this video I understand how to get the desired flip effect, and also understand how I could create other unique 3d effects using this process

you are such a good tutor, you are talented

Brilliant video! and thank you for taking your time to really explain step by step what each code means!

great tutorial. really loved the sandwich example, it cleared the one doubt i had. Make more videos, please

I finally understood this flipping card code! thank you

Thank you for that great lesson!!! I tried the code and it worked. Before your tutorial I tried to learn the CSS 3D flip card effect with Treehouse. Their lessons were completely useless. I couldn't understand anything. Your lesson was top notch! Once again thank you!!!!!

This is my wish for an instructive css tutorial come true!! thank you!!

Great video! Also you can add the perspective property to make it look even more real, if someone likes: .maincontainer: { perspective: 1000px ... rest of the code ...} As the name of the property says, it gives perspective to the element

Thank you so much, your explanation about the css flip card was perfect!

Just subbed because your explanation was so on point! Thanks for not wasting time with fluff and explaining everything with great examples :)

Were were you the whole time you are explaining beautifully hope i should found you earlier Keep uploading such amazing content

Very very impressive. minimum css used. Its so useful.

I know this is an older video - but thank you - this was a wonderful explanation

Too much information in 6 mins .. clear and too the point....✨

Great Tutorial, it helped so much...

U help me alot i am worried since last few days also watch some other video also but your code is like small and powerfull thank you so so much sir

Best card flip video I've ever seen!

You're the best, thank you !

Thank you sir for explaining this is very easy way..❤❤❤❤

Very clear and straightforward regards

Everything explained, understable. Great video!

Finally you made me understand this flip card effect.... Thanks ☺

this is what I need... thanks for your clear and concise explanation :)

Thanks for the video. Great help.

It is working.....very good explanation & coding.

perfect explanation, an informative video. Thank you for explaining everything step by step

This was was professionally simplified for me... Much thanks

wow! great explanation! you also explained the 'why's' keep it up !

You are a amazing tutor. Please do upload more videos like these. Janet, Singapore

Oh man! This is amazingly simple! Thank you so much

If you would like to achieve the same flip effect using a click or tap, you can use simple Javascript. Here is the same code snippet for the full tutorial, with the Javascript code appended at the end of this code snippet. Enjoy! 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; } /* THIS USED TO BE THE PSUEDO CLASS CONTROLS THAT FLIP ON MOUSEOVER AND MOUSEOUT IN CSS */ /* BUT NOW THIS CLASS IS BEING CALLED IN JAVASCRIPT WHEN THE CARD IS CLICKED */ .flipper{ transform: rotateY(180deg); } /* 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; background: #ffc728; 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 function myFlipFunction() { var myElement = document.getElementById("thecard"); myElement.classList.toggle("flipper"); }

Thank you! Really good tutorial. Easy to follow and good explanation!

An amazing lesson, thank you! you have a new subscriber.

amazing explanation. 👏👏

Thanks, your code really works , now i will do by myself, creating contents for English clases as a seconde Language, and other games,

Thank you! Your tutorial is really clear and helpful!

Sir, nice explanation with amazing tutorial !!

This was lovely and thoroughly explained. :)

Couldn't stop me liking this video ❤

Great tutorial Arjun, thank you for sharing!

Good job man, keep up the clear explanations!

Excellent way of explaination. Love from Pakistan : )

I was just searching for a ready made flash card and went to this haha

good ! the best ive found in youtube

Great tutorial, you're awesome!

Really well explained, thanks so much 😊😊😊😊

It was simple and easy tutorial thank u for making such a fun to learn video.

Just Awesome. this video help me to solve my problem. thanks for this one.

WOw I love your style

Thank you for that great lesson

This was amazing! Thank you very much man! :)

man i was stuck on this thanks you helped

Perfect. This is what i wanted :) Thank you soo much

very good simple explanation!

you have a style , great video

Thank you Sir.Amazing Work💯.Im learning a lot from you🙏

This is amazing and can get that card at center..

Briliant tutorial and well explained :)

thankyou for this tutorial, it's save my day ~~

Thanks for great explanation!!

Thank you great tutorial

Great video thanks!

Absolutely incredible stuff... Can't thank you enough for this amazingly well-done tutorial! By the way, what music did you use?

Very good this explanation. Best Regards

keep up the good work dude.

thanks for this tuto i suscribed!

Enjoyed it!

Thanks friend. Interesting!

I dont know if it is explained in coments BUT if you hover over you get flickering, problem is the card is flipping so it breaks hover state, to fix you must fix hover state so its like this: from: thecard:hover {transform: rotateY(180deg);} to: .maincontainer:hover > thecard{transform: rotateY(180deg);}

Great explenation, thank you so much!

Thank you so much

Thank you soo much is very helpful and good explained 🥰🥰

WOW HAT OFF you explain so nicely thank you so much

Very useful, thank you very much, Sir!

Awesome explanation....

Thanks bro

best tutorial

Nice tutorial

I found many ways to but this is crazy

Thank you for the great tutorial! How could i achieve the flip effect not by hovering on the card but by clicking on it?