Awesome Card Flip Animation using CSS & JavaScript - Easy tutorial
HTML-код
- Опубликовано: 23 сен 2020
- 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
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!
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
Awesome buddy!!!! I used it for my Ecommerce Website.....Loved this.....Well explained
Great vid! Thank you so much. This is perfect for the project I'm working on
Freaking great! Crystal clear! Thank you !!
Thanks a lot for this video! It was really helpful. Very simple and straightforward.
Tyler, this tutorial is so awesome. You are awesome!!!
Glad you think so!
looked on alot of these videos and liked this the most. Thanks man for a really good tutorial.
Glad you liked it!
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.
Wow, thanks!
Did anyone else get overlapping text on the card when you used "Lorem" or any other longer text in the tag?
I love it. Thanks 👌
i stumbled on this video and i have to subscribe
A very good tutorial, everything is very clear. Thanks a lot!!!
Glad it helped!
More of this, really like these easy tutorials..so good for inspiration
Thank you! Will do!
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 =)
@Abdullah Boston Definitely, have been watching on InstaFlixxer for since november myself :)
I really laughed when I found we got the same theme, cool video btw
i love u, thx!!! i need this
Thanks for this, learn so much
Glad it was helpful!
Great vid, I do appreciate. Just what I needed to see...
Glad it helped
I used this as a base to make an ionic vue simple card game. Thank you
Excellent!
Loved this
Awesome! :D
Thanks a lot!
Nice video, everything works! Thanks a lot ;)
You're welcome!
Thanks, this was very helpfull ♥
Hey great video, thank you!
Would it be possible to flip the card clicking a button instead of tapping the card?
Brilliant tutorial
Thanks!
Thank you so much!! Using this technic I'm gonna make prettier websites!
Greetings from Chile!!
Awesome!!! :D
excellent code... very useful... thank you very much
Great video!
I love it! thank you. Greetings from Argentina
Thank you for watching! Hello in Argentina!
Thank you so much!
You're welcome!
Hey cool ☺ Any chance to start the flip when you toggle a switch? (e.g. monthly to yearly)
OutStanding!
Thank you
I want more............ Thank you so much.
Working on it!! :D
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 👏👏
Thanks, will do!
Javascript doesn't stop to amaze me
It's awesome!
Muito bom o vídeo parabéns
is there a way to make the container thicker on the side view when flipped?
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. !
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!
@@TylerPotts That's will be great Tyler! Thank you so much :)
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?
I'm having the exact issue. I was hoping there'd be a reply.
@@thomassavino3813 use for each in javascript
Wow 👍
🤗
Thanks a lot, brother but can you please let me know How I can add multiple cards on a single page.
Easy and effective! I used it for my interview work! Thanks a lot!
Glad it helped!
@@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! 🙂
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
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 ?
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? :/
I'm unsure I'd have to take a further look. Sorry.
M
Mm
12:37 line.76 can you please elaborate more on the " .card__header::after "
What do you want me to explain?
Hey! Sorry for asking, but i have a short question. How do i change the js, so that multiple cards would work?
It's hard to explain over text but you need to use a querySelectorAll and loop through each one then apply the events
@@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');
});
});
Instead of card.addevent try link.addevent your still referencing the list of cards instead of the individual one!
@@TylerPotts Oh finally it works! I literally can't say thank you enough
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));´´
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.
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
It gets applied to the ".card__inner" div via javascript but is not declared in the HTML it is only set via JavaScript.
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.
I keep getting cannot read properties of null (reading 'addeventlistener')
How can I put multiple cards in row? Next to each other?
You need to select all elements and not just thebone
On the site, you need to turn over 8 different cards, but it works only on the very first one. Why?
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
@@TylerPotts thx)
Is there a way to do this without the code? Like an app or a beginner friendly version?
Umm I only ever work with code so I don't know
plz tell a tutorial about html and css to learn from basic
tnx
Hey, how would I make this work for more than one card?
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.
😍🤗
Good job Tyler. I would also suggest adding...
body { overflow: hidden; }
.card { margin-top:50px; }
Also thank you...
its not working on me can u help?
on call or something
how to change image in this code? please help meeeeeeeeeeeeeeeeeeeeeeeeee
can you please provide code files? I want to use them as for my reference bro.
The link is in the description ? :)
hi thanks for the tutorial
if I add another card it doesn't work it please help XD
You would need to change the document.querySelector to document.querySelectorAll and then loop through the results...
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
thx works XD
@@romannovak375 Woo happy you understood what you said! My comment wasn't very clear :)
How to stop backface to rotate if there is a link?
Hey Paul, did you find the answer to this??
@@IspittingFactzz no
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.
@@TylerPotts Hey. Thanks. Yepp its allready made.
@@paulmoldovan9518 Did you get it to work?
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
how can i rotate in 1 direction?
I'm not sure what you mean! If you need help feel free to join the discord and as there :)
How can I do to place 2 or more cards?
I've been asked multiple times for this so I will probably create a revised video :)
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));´´
@@vitoriaaguiar3379 Thanks.😁
@@vitoriaaguiar3379 I LOVE YOU YOU SAVED MY LIFE :')
@@vitoriaaguiar3379 Thank you! Thank you! Thank you!
not wroking for multiple cards
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
Advice: instead of focusing more on styling, try to explain more about the Crux, the flipping effect, and the backface and stuff.
Thanks for the feedback. I'll keep that in mind for future videos