CSS Flip Card Effect

[@ArjunKhara]

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

[@lesterdiaz6786]

how to make it responsive?

[@appleproschoolnyheter5810]

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

[@vandebansal2331]

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

[@BMYL2022]

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

[@saintwinner9769]

thank you

[@TomTom-jv5sv]

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

[@gwija5783]

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

[@ArjunKhara]

Thanks very much for your comments; made my day!

[@rileygriffin8006]

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

[@rebeccaa7471]

This was a fantastic explanation and I loved the sandwich analogy. Thank you so much, Arjun!

[@Mehrankhan-bh4gf]

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

[@julialee690]

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

[@ArjunKhara]

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

[@naushadansari708]

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

[@salman-asghar]

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 🤩🤩

[@sksahinparvej5500]

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

[@kaushikdr]

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!

[@ashleysangma407]

The best explanation I found.

[@alexgochenour8740]

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!

[@ArjunKhara]

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

[@sayurikamble825]

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!!!

[@thedarkbrickstudio2452]

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

[@steevoni1]

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.

[@ArjunKhara]

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

[@steevoni1]

@@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]

@@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]

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

[@darius94arad15]

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.

[@ArjunKhara]

Thank you very much for your kind comments. Made my day! I'll be putting up more videos soon now that my course of study is over. Cheers!

[@RD-lf3pt]

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

[@ArjunKhara]

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

[@SchwarzerFalke]

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

[@olansean9868]

you are such a good tutor, you are talented

[@ArjunKhara]

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

[@abrar8133]

I finally understood this flipping card code! thank you

[@ArjunKhara]

You're very welcome!

[@827023685]

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

[@TheDanthelion]

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

[@bretts7740]

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

[@ArjunKhara]

Thanks for your very nice comment :) glad you found the tutorial useful.

[@ijoa]

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

[@arthurvinicius7981]

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

[@83greene]

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

[@ArjunKhara]

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

[@GG-zj7oi]

Best card flip video I've ever seen!

[@ArjunKhara]

Thank you for your very kind comment. Made my day :)

[@GG-zj7oi]

And this video saved my day ;)

[@bambubombon]

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

[@firstbloodfangy6933]

Great tutorial Arjun, thank you for sharing!

[@PRINCEDAKSHWEB_WIZARD]

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

[@jnova2766]

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

[@almerinobuce7878]

Great Tutorial, it helped so much...

[@WildlifeExplorer05]

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

[@willyish]

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

[@abouyousuf00]

Very clear and straightforward regards

[@cypreanadie7424]

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

[@ArjunKhara]

You're very welcome :)

[@justinegoroszenko3506]

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

[@adil_mansoori]

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

[@saikun0293]

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

[@abhishekde1792]

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

[@aleksajovanovic5142]

Everything explained, understable. Great video!

[@satchito]

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

[@ArjunKhara]

No worries, glad you found it useful :)

[@DrHappybone]

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

[@ArjunKhara]

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

[@janetracy8732]

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

[@ArjunKhara]

No worries, glad it helped :)

[@janetdsouza3526]

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

[@jaydenmoon1165]

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

[@jawadshah8043]

Excellent way of explaination. Love from Pakistan : )

[@soumyaranjanpradhan1325]

Sir, nice explanation with amazing tutorial !!

[@venkatnaidu4nimmala]

you have a style , great video

[@Slimboyfat1979]

WOw I love your style

[@aaijalni]

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

[@andromedaanne9251]

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

[@gokilamadhu6355]

Really well explained, thanks so much 😊😊😊😊

[@Google.clouds]

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

[@wenchinyu3759]

Thank you! Your tutorial is really clear and helpful!

[@carinwood1206]

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

[@BalpreetDhillon]

very good simple explanation!

[@williammichael5554]

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

[@ScofieldSykes]

Great tutorial, you're awesome!

[@Coder-Journey]

You're the best, thank you !

[@ArjunKhara]

Thanks very much! :)

[@yeowzh]

Good job man, keep up the clear explanations!

[@mahbuburrahman9326]

Couldn't stop me liking this video ❤

[@ArjunKhara]

haha cheers :)

[@mahbuburrahman9326]

@@ArjunKhara ❤

[@le9292]

amazing explanation. 👏👏

[@ArjunKhara]

Thanks :)

[@carolinerozali8030]

This was lovely and thoroughly explained. :)

[@gibernaujk]

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!!!!!

[@gonzalochristobal]

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

[@ArjunKhara]

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

[@mahdibouchenaf7215]

thanks

[@RSTao77432]

perspective or perspective origin? or both

[@liamtanis4163]

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

[@kuyaaibangaming9841]

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

[@moonsdonut5188]

man i was stuck on this thanks you helped

[@ekbalzayan4722]

Thank you for that great lesson

[@karincentenaro356]

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

[@ArjunKhara]

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

[@karincentenaro356]

@@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?

[@ArjunKhara]

@@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!

[@mohammedelhoussni]

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

[@ArjunKhara]

Thanks very much! Glad you found it useful :)

[@alwynmiranda3425]

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

[@rscrj]

Very good this explanation. Best Regards

[@kishanpati336]

Briliant tutorial and well explained :)

[@A7ka7]

thanks for this tuto i suscribed!

[@prempp6043]

good ! the best ive found in youtube

[@balakrishnanyukesh1646]

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

[@paff8360]

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

[@ammnvx8799]

WOW HAT OFF you explain so nicely thank you so much

[@asachemicals2983]

I found many ways to but this is crazy

[@codeeasy7673]

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

[@rinaldsdomanovs7737]

Thanks for great explanation!!

[@TK-wp3iw]

Thanks 😀😀😀

[@harshithvellala2589]

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

[@filmyfreak5413]

Awesome explanation....

[@juliussorio868]

keep up the good work dude.

[@streetcomando650]

Thank you great tutorial

[@mirjana72003]

Great explenation, thank you so much!

[@evaninadgn]

Great video thanks!

[@sunerashaikh4838]

Superb. Love it .Thanks

[@destradar1]

Thanks friend. Interesting!

[@Adil-kk7oz]

Enjoyed it!

[@preksha888]

Very useful, thank you very much, Sir!

[@ganeshsolankar9088]

Nice tutorial

[@syamsundar2993]

Thanq bro for this it's really good..!! You are just awesome....!!!!!!!!!!

[@vaibhavagrawal431]

Thanks for the Sandwich 🥪🥪🥪🥪🥪🥪

[@ArjunKhara]

haha glad you enjoyed :)

[@phodaOG]

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);}

[@ArjunKhara]

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

[@jupiterjs031]

Very nice tutorial Thanks

[@abhishekva449]

Great dude, really awesome