Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial

Learn how to create an awesome animating card flip with only the use of HTML, CSS and JavaScript. You can use this in games, website reveal cards or even for a portfolio piece!
Github repo: github.com/TylerPottsDev/card...
// JOIN THE DISCORD
/ discord
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// SUPPORT MY GRIND
Patreon: / tyler_potts_
LIKE // SUBSCRIBE // SHARE // COMMENT
#CSS #JavaScript

[@qwarlockz8017]

This was a really great vid. It was clear and easy to follow and sort of set a lot of things in place. Thanks for the help and great work!

[@kristofbalinth2071]

You deserve millions of subs. I accidently found this channel but the content is golden so I'm staying :) Thanks and keep up the good work. Superb content and presenting format.

[@TylerPotts]

Wow, thanks!

[@boneykingofsomewhere]

Just found your videos and I love them! your videos are short-ish and well explained, these are good things. 12 hour react course is just a bit much from others lol

[@kajberg9111]

looked on alot of these videos and liked this the most. Thanks man for a really good tutorial.

[@TylerPotts]

Glad you liked it!

[@prathamgenius]

Awesome buddy!!!! I used it for my Ecommerce Website.....Loved this.....Well explained

[@manohisoa]

Thanks a lot for this video! It was really helpful. Very simple and straightforward.

[@iselaregain9301]

Tyler, this tutorial is so awesome. You are awesome!!!

[@TylerPotts]

Glad you think so!

[@maefaemusic]

Great vid! Thank you so much. This is perfect for the project I'm working on

[@user-ck8xt6hl2k]

Great video! That was exactly what I was looking for. Thanks!

[@TylerPotts]

Glad it was helpful!

[@bedtimehorrorstoryyoutube]

Freaking great! Crystal clear! Thank you !!

[@linhbebu912]

A very good tutorial, everything is very clear. Thanks a lot!!!

[@TylerPotts]

Glad it helped!

[@estebanpedroguerravidal8336]

I love it. Thanks 👌

[@mcm4981]

Great vid, I do appreciate. Just what I needed to see...

[@TylerPotts]

Glad it helped

[@d.ashley879]

Did anyone else get overlapping text on the card when you used "Lorem" or any other longer text in the tag?

[@roshdyessam3480]

I really laughed when I found we got the same theme, cool video btw

[@Amilcar99]

i love u, thx!!! i need this

[@Dxaskotek]

Nice video, everything works! Thanks a lot ;)

[@TylerPotts]

You're welcome!

[@andrearivera7065]

Thanks, this was very helpfull ♥

[@aloobre]

More of this, really like these easy tutorials..so good for inspiration

[@TylerPotts]

Thank you! Will do!

[@abdullahboston6963]

You probably dont give a shit but if you guys are stoned like me during the covid times you can stream all the latest movies and series on instaflixxer. Been streaming with my brother for the last months =)

[@franciscohen1299]

@Abdullah Boston Definitely, have been watching on InstaFlixxer for since november myself :)

[@wanishoaib_]

i stumbled on this video and i have to subscribe

[@samjoseph5718]

Great video!

[@santiagoramirez5507]

Thank you so much!! Using this technic I'm gonna make prettier websites! Greetings from Chile!!

[@TylerPotts]

Awesome!!! :D

[@bepd]

Loved this

[@TylerPotts]

Awesome! :D

[@petipois28]

I used this as a base to make an ionic vue simple card game. Thank you

[@TylerPotts]

Excellent!

[@gabriel_lk]

Thanks a lot!

[@malamhari_]

Thanks for this, learn so much

[@TylerPotts]

Glad it was helpful!

[@ricardoreales7316]

excellent code... very useful... thank you very much

[@Sol-ty5nx]

I love it! thank you. Greetings from Argentina

[@TylerPotts]

Thank you for watching! Hello in Argentina!

[@lucasdahl1118]

OutStanding!

[@TylerPotts]

Thank you

[@dowelg1071]

is there a way to make the container thicker on the side view when flipped?

[@hvariawa]

Brilliant tutorial

[@TylerPotts]

Thanks!

[@DllacyLimaJr]

Muito bom o vídeo parabéns

[@kaderlakhdar5735]

Lovely tutorial , keep on the hard work, it would be nicer to have your server window open on the side , this helps understand better the process and notice changes at ones it happens 👏👏

[@TylerPotts]

Thanks, will do!

[@yevgenia7785]

Thank you so much!

[@TylerPotts]

You're welcome!

[@limpmebrasil4991]

Hey great video, thank you! Would it be possible to flip the card clicking a button instead of tapping the card?

[@palashxm]

Wow 👍

[@TylerPotts]

🤗

[@stefanpfadt4353]

Hey cool ☺ Any chance to start the flip when you toggle a switch? (e.g. monthly to yearly)

[@nestorfontalvo1061]

Javascript doesn't stop to amaze me

[@TylerPotts]

It's awesome!

[@duck_it]

I want more............ Thank you so much.

[@TylerPotts]

Working on it!! :D

[@parkerthomson1447]

Would someone happen to know why the back of the card is in the correct color but the side with all the content is a light gray? This is from me trying to learn and follow along I dont see what I messed up

[@tamaskosa3283]

Easy and effective! I used it for my interview work! Thanks a lot!

[@TylerPotts]

Glad it helped!

[@tamaskosa3283]

@@TylerPotts The markup & css is simple enough to easily understand the mechanics behind it. However I still don't know how the css "knows" which html elements to use for card front and back sides. Is it because you set "transform-style:preserve-3d;" on an HTML element which MUST have exactly 2 children of which the first will be displayed on default and the second after the transformation? The mechanic goes hidden behind the scenes and I'd like to understand what's happening. Thanks again! 🙂

[@ezebado]

Wow! Amazing video Tyler ! Thank you so much for sharing. Is it another video explaining how is the process if I want to create more flashcards ? Like 100 for example. I would like to create flashcards to study. Thank you in advance. !

[@TylerPotts]

Hey E.B, a lot of people have asked for this so I'm going to create another video explaining how you can create multiple flip cards on a single page!

[@ezebado]

@@TylerPotts That's will be great Tyler! Thank you so much :)

[@user-gw6hy1md4b]

i want to make 6 cards on the same page but just copy and paste the code does not work i tried some other things but none of them worked, how can i do ?

[@user-xk2dj4zi2p]

Thanks a lot, brother but can you please let me know How I can add multiple cards on a single page.

[@doublevizzion]

I keep getting cannot read properties of null (reading 'addeventlistener')

[@sanjaybalaji9367]

Could anyone explain me where is_flipped is declared as class in html., because he is calling it in css and also added it in JS. Please explain

[@TylerPotts]

It gets applied to the ".card__inner" div via javascript but is not declared in the HTML it is only set via JavaScript.

[@huckerxxx]

Hello! Thanks for this great tutorial. Im not much of a programmer so I have one problem. When I copy whole div with class card to have 2 cards with diferent descriptions, one/first can flip and the other cant. What should I change in js to have both cards flip?

[@thomassavino3813]

I'm having the exact issue. I was hoping there'd be a reply.

[@richardala3784]

@@thomassavino3813 use for each in javascript

[@elschilling]

😍🤗

[@mikheilrukhadze8782]

its not working on me can u help? on call or something

[@zepherscotty]

This is fantastic, but how come I can't copy it & make more than one? When I try to make a second card & either try to add a ".card__inner2" for example to the Javascript, It doesn't work, or if I copy & make a completely new JavaScript code & add ".card__inner2" to it's own version of the Javacode, it makes both cards stop working. I know this is 3 years old but I would love to know why.

[@vitoriaaguiar3379]

How can I put multiple cards in row? Next to each other?

[@TylerPotts]

You need to select all elements and not just thebone

[@alquran549]

how to change image in this code? please help meeeeeeeeeeeeeeeeeeeeeeeeee

[@w.gene28]

i know its been two years but now i am here and i actually followed the whole video and fix some of my mistakes but i cannot seem to figure out why my p tag is taking a limited amount of text and whenever its exceed and number of lines it all crashes and scramble into each other , like its a total mess. Please help.

[@slendermann7610]

Hi, this tutorial was really helpful!! everything seems to work perfectly using chrome, but... using Safari instead, the property -webkit-backface-visibility: hidden; seems to work only on the front face of the card, while when the card is flipped i can see through the back face and i dont know how to fix that. is there any solution to this weird problem? :/

[@TylerPotts]

I'm unsure I'd have to take a further look. Sorry.

[@jesy1732]

M Mm

[@shubkale376]

12:37 line.76 can you please elaborate more on the " .card__header::after "

[@TylerPotts]

What do you want me to explain?

[@HosseinPi921]

plz tell a tutorial about html and css to learn from basic tnx

[@eugeneskrypnyk7396]

On the site, you need to turn over 8 different cards, but it works only on the very first one. Why?

[@TylerPotts]

That's because we only target 1 card using querySelector if you want to select multiple you need to use querySelectorAll then loop through the results and apply the event listeners

[@eugeneskrypnyk7396]

@@TylerPotts thx)

[@janina1240]

Hey, how would I make this work for more than one card?

[@TylerPotts]

Instead of selecting one card you'd need to select multiple with something like "querySelectorAll" then loop through and apply the same code - I hope that helps.

[@oguzozdemir8886]

Good job Tyler. I would also suggest adding... body { overflow: hidden; } .card { margin-top:50px; } Also thank you...

[@imanbenetlewis6365]

Is there a way to do this without the code? Like an app or a beginner friendly version?

[@TylerPotts]

Umm I only ever work with code so I don't know

[@Michael-yb1bm]

Hey! Sorry for asking, but i have a short question. How do i change the js, so that multiple cards would work?

[@TylerPotts]

It's hard to explain over text but you need to use a querySelectorAll and loop through each one then apply the events

[@Michael-yb1bm]

@@TylerPotts yeah so thanks for answering so fast. I know, that I have to use querySelctorAll and I already tried it but somehow my code doesn't work. And btw. great tutorial My code: let card = document.querySelectorAll(".card__inner"); card.forEach((link) => { card.addEventListener('click', function(e) { this.classList.toggle('is-flipped'); }); });

[@TylerPotts]

Instead of card.addevent try link.addevent your still referencing the list of cards instead of the individual one!

[@Michael-yb1bm]

​@@TylerPotts Oh finally it works! I literally can't say thank you enough

[@vitoriaaguiar3379]

Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´

[@sahajranipa]

can you please provide code files? I want to use them as for my reference bro.

[@TylerPotts]

The link is in the description ? :)

[@glendonphilippbaculio1811]

how can i rotate in 1 direction?

[@TylerPotts]

I'm not sure what you mean! If you need help feel free to join the discord and as there :)

[@romannovak375]

hi thanks for the tutorial if I add another card it doesn't work it please help XD

[@TylerPotts]

You would need to change the document.querySelector to document.querySelectorAll and then loop through the results...

[@romannovak375]

const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard)); thx works XD

[@TylerPotts]

@@romannovak375 Woo happy you understood what you said! My comment wasn't very clear :)

[@abgthscode6326]

not wroking for multiple cards

[@paulmoldovan9518]

How to stop backface to rotate if there is a link?

[@IspittingFactzz]

Hey Paul, did you find the answer to this??

[@paulmoldovan9518]

@@IspittingFactzz no

[@TylerPotts]

Hey Paul, It's hard to explain over text but you need to check the click path to check what was clicked and if it was a link return / stop propagation... If you need further help feel free to join the discord I can help more there.

[@paulmoldovan9518]

@@TylerPotts Hey. Thanks. Yepp its allready made.

[@lucasdahl1118]

@@paulmoldovan9518 Did you get it to work?

[@factking2241]

nyc tutorial !, can u pls tell me how to flip the page from the other side, like it is getting flipped from the side at which it is written card front, but I want it to get flipped from the other side where it is written the information.... Please reply !, I want to know

[@JimmyDevAndGeek]

How can I do to place 2 or more cards?

[@TylerPotts]

I've been asked multiple times for this so I will probably create a revised video :)

[@vitoriaaguiar3379]

Hi, if u replace the js code for this one, it will work ´´const card = document.querySelectorAll(".card__inner"); function flipCard() { this.classList.toggle('is-flipped'); } card.forEach((card) => card.addEventListener("click", flipCard));´´

[@JimmyDevAndGeek]

@@vitoriaaguiar3379 Thanks.😁

@@vitoriaaguiar3379 I LOVE YOU YOU SAVED MY LIFE :')

[@thomassavino3813]

@@vitoriaaguiar3379 Thank you! Thank you! Thank you!

[@Ricardoromero4444]

Would be nice if the tutorial showed only the flipping animation. We have to skip through the whole video just to get to the part we came to learn

[@ranjeet5806]

Advice: instead of focusing more on styling, try to explain more about the Crux, the flipping effect, and the backface and stuff.

[@TylerPotts]

Thanks for the feedback. I'll keep that in mind for future videos