Card Flip Effect (HTML & CSS)
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- Learn how to create a 3D Card Flip Effect with HTML and CSS.
Besides being an elegant animation, flipping cards, with content in both sides, can be a great space saver for a website.
The minimal HTML structure and CSS styling to achieve the effect is described so that you can go ahead and add content and styling to front and back sides of the card, creating all kinds of flipping cards such as: Portfolio Cards, Profile Cards, Social Cards, Credit Cards, Business Cards, Movie Cards, Recipe Cards, Blog Cards, Product Cards, Game Cards etc.
Initially, the card flip effect takes place on hover over the card container, only using CSS and then JavaScript is used in order to trigger the effect upon a click event.
Code for this Project: codepen.io/Cod...
Support the Channel 💙☕🙏
PayPal: paypal.me/Codi...
Suggested Videos:
Slide-In Overlay Hover Effect (HTML & CSS): • Slide-In Overlay Hover...
Typing Effect with HTML, CSS and JavaScript: • Typing Effect with HTM...
Back to Top Button with HTML, CSS and JavaScript: • Back to Top Button wit...
Keeping Footer at the Bottom of the Page (HTML & CSS): • Keeping Footer at the ...
Currency Converter with HTML, CSS and JavaScript: • Currency Converter wit...
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Cod...
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
Thank you, this is my favorite 3D Flip effect video because you actually show us how to do it with a click instead of just hover
Oh thank you for the lovely comment!! Very glad you found this useful 🙂💙
omg Thank you Your explanation was so good that I could easily understand even though I was Korean. It's amazing. many thanks
Amazing thank you! Keep it up 💙💙
Dude I donno how to thank you. Caz I was trying to understand one concept which u said at the video. To be honest I'm not gonna say what is it but not even a single person or website said why that bunch of was there. Everyone passed that and explained except you. Still appreciate and thanks man 🤞🔥
Thanks for the lovely message mate!! My pleasure 🙂 All the best, keep coding 😉💙
Thank you so much for the tutorial. I've spent two days writing pretty long js script, but you did it in 20mins and code is so short and elegant. Amazing
The fact that you add each CSS property by explaining them first makes your tutorial super super awesome. Thanks mate :) Liked and Subscribed :)
Oh thanks for the lovely comment mate! 🙏🙂 Very glad you liked it!! Welcome aboard 💙💙
Sir, I'm from india....thank you so much for explaining this concept...I have seen soo many videos on videos on this topic but none of them explained
Oh thank you 🙂 Very glad you found this useful!! 💙
I watched many tutorials about css, but this is the best tutorial thanx dude. Anyone can teach but the important thing is the audience or student need to understand. From that end you are best. Thanx
Oh thank you for the lovey comment!! 🙂 My pleasure, very glad you liked this! Keep coding 😉💙
@@CodingJourney noted with many thanx. Waiting for more
Thank you - I've been searching for a flip card effect that didn't involve absolute positioning on the container - so helpful!
Amazing! Glad it was helpful 🙂 You can always of course absolutely position the card, but that's a special case, I usually prefer presenting the general/default. All the best, keep coding 😉
Great tutorial. You do a very good job of explaining why you do the things you do and how it works.
Thank you, I appreciate that! Very glad you liked it 🙂
Liked and subscribed! Thank you
Awesome, thank you!! Welcome aboard 😉
This is one of the best tutorials I've watched on HTML and CSS. Your tutorial was clear, concise, and informative! Liked and subscribed!
Thanks mate! Welcome aboard 🙂💙
Thanks!!! great video.
I like your channel
Oh thank you, my pleasure 🙂 Thanks for the nice comments and support!! 💙
Great Sir Loved It
Amazing! Thank you 🙂
Thank you so much for this. I'm going to use it to make online flash cards for my students. This must take you such a long time to put together, thank you!
My pleasure 🙂 Yeap, it does take time (I'm sure that you, as a teacher totally get it 😉) but it's worth it! Especially when these projects are being used for such a good cause 🙂 All the best!!
Awesome and super well explained !!!
Many thanks
Thanks man! Glad you liked it 🙂
WONDERFUL tutorial, and very useful, thanks!!
Great tutorial and very nice demo. Well explained.
Thank you 🙂 Very glad you liked it!!
Very good.
Oh thank you, glad you liked it!!
thanks a lot, i am clear the rotate flip card design now...
Amazing! Very glad it helped 🙂
I relate how you assign CSS class names xD
Heh 😁💙💙
I like the way how You teach.
Thank man! I'm trying...sometimes I'm happy with the result, sometimes not...that's life 🙂 All the best, keep it up!!
awesome
Excellent tutorial. Thanks! God bless you :)
Thanks man! U2 💙🙂 Very glad you liked it!
simple and elegant, thank you
Thank you! 😊 Very glad you liked it!!
awesome video great explanation!!
Thank youuuu 🙂 Very glad you liked it!!
powerfull
🙏💙🙂
Good job man. Thanks for it. Silas from Brazil.
Hey Silas my man! Amazing, very glad you liked it 🙂 Warm greetings to Brazil!!
This is great thanks, it really helped with school work
That's awesome! All the best with school, keep progressing!!
Very nice
Thanks!! Very glad you liked it 🙂
❤❤❤
Excellent thanks!!
Thanks man!
My pleasure 🙂
Love the tuturial. Is there a way to flip from the center of the card without defining the pixels in the card-container.
Super tutorials, best work thank you somuch
Thank you for this lovely comment man! Very happy to hear that 🙂
nice ... because good working ...
Thanks man, glad you liked it!!
Great video bro. Only one question: when I try to create multiple flip-cards, only one card will respond to my clicking, the rest don't respond. How can I adjust my JS to apply the toggling to all elements in a class?
Thanks man! In this case you would want to select all cards (so use querySelectorAll instead of querySelector), loop through selected cards (e.g. with a for-loop or a forEach method) and add the "click" event listener to each card. A working code snippet for this purpose would be the following:
const flipCardContainers = document.querySelectorAll(".flip-card-container");
flipCardContainers.forEach(function(flipCardContainer) {
flipCardContainer.addEventListener("click", function() {
flipCardContainer.classList.toggle("flip");
});
});
All the best!!
@@CodingJourney Thank you so much :D
Lovely brother....
Thanks bro! Glad you liked it!!
Excellent work my friend! I very much enjoyed your tutorial! I'm wondering though why my images are not smooth transitioning on click but they kind of 'bounce' or "jiggle" a little on transition? I'm using SVG illustrations with all objects grouped together. Any advice would be greatly appreciated and thank you so much!
I notice this was only happening in Firefox browser! Works perfectly in Brave and Chrome! Any ideas would be greatly appreciated. Thank you
great video! Any way to make it flip when clicked without using javascript? using only html, css and php?
I don't know if you still respond to this video or not, but I was wondering if there is a way to have the flip stay in one direction (i.e., image flips to the left, and then it flips to the left again, flips forward, and then it flips forward again, etc.)? This is kind of hard for me to explain this, so I hope you at least somewhat understand what I mean.
Such a good video. However, having difficulty getting the JS to work do you have a source code for that please?
I worked it out I still had :flip rather than .flip
Thank you 🙂 You can find a link in the description! However, I don't think I've included the JS part...so for that you will have to follow the video instructions...that shouldn't be more than a couple of minutes starting from 18:00 🙂 There was also a question in the comments about adding the "click" event listener to multiple cards so you might also want to check that answer! Good luck!! 🙂
I'm trying to do multiple cards on the same page but can only get the click to work for the first card. Any idea on how to do the querySelector for multiple cards?
Hello! I'm pasting my reply to a similar question so that you don't have to go through the comments:
In this case you would want to select all cards (so use querySelectorAll instead of querySelector), loop through selected cards (e.g. with a for-loop or a forEach method) and add the "click" event listener to each card. A working code snippet for this purpose would be the following:
const flipCardContainers = document.querySelectorAll(".flip-card-container");
flipCardContainers.forEach(function(flipCardContainer) {
flipCardContainer.addEventListener("click", function() {
flipCardContainer.classList.toggle("flip");
});
});
Hope this helps! All the best, keep coding 😉💙
@@CodingJourney Thank you so much! Amazing tutorial!
how to put many cards horizontally
Anyone knows if this working on safari and ios safari?? I've done one and checked can i use and it seems safari is not supported??
Hello! Check out the comment by MsRobynM and the solution we came up with. Hopefully that solves the problem...All the best!! 😉
Great video but does not seem to work on Safari. On hover just get a reversed pic. Anyone know why or how it's fixed?
Hello 🙂 Thanks and sorry for the late reply! Unfortunately I currently don't have access to Safari browser so that I can debug but maybe this is due to the backface-visibility property...I think Safari still requires a prefix. So maybe the following would do the job:
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
All the best, keep coding 😉🙂
@@CodingJourney That's exactly what it was. It all works perfectly now on Safari. Thanks.
Amazing! Thanks for pointing this out 🙂
como faz para colocar um cartão ao lado do outro?
For some reason when my card flips - it remains visible? I can now see the back of the card around the image that is on the front. Any thoughts?
Hey mate! There's a (CodePen) link to this project in the description. If that works fine for you, then you can compare the code and hopefully make it work as intended!! All the best 💙
@@CodingJourney Nope. Same result unfortunately. I'm giving up for now. I did save, though. Thanks! Not sure what I'm doing wrong.
Did you set "transform-style: preserve-3d;" for the ".flip-card"? But it could be anything, it is impossible to debug without looking at the code...I'm quite sure that if you really want to make it work, you eventually will 🙂 Keep coding 😉💙
is this responsive? if not how do i make it responsive?
Hello 🙂 In order to concentrate on the main goal of this tutorial, which was the card flip effect implementation, I used for example fixed width and height for the card. You can always use media queries in order to control the layout for different screen sizes. For example, in order to reduce the card size for smaller screens you could do the following in CSS:
@media(max-width:767px) {
.flip-card-container {
width: 240px;
height: 320px;
}
}
All the best!! 🙂
I'm having a bit of an issue. Everytime my mouse hovers close to the edge of the card, it kind of flickers back and forth and doesnt always rotate. Please help me
Hey!! There shouldn't be a flickering issue while hovering close to edges, since flipping occurs when hovering over the flip-card-container element, which itself doesn't move. I think if you follow the tutorial carefully you should be fine or, if you don't have time for this, you can find the final code for this project in the description link. Keep it up!!!
@@CodingJourney Thank you for the help. I realised I made a mistake and decided to stop with this idea. I'm trying to make a coffee website for my school project. And I was trying to incorporate this tutorial with the cards that I put into a display: grid. But I made a mistake because the cards were doing that jitter thing. So I dumped it and put all the info onto the card without any effects
Very nice! Adjustability, that's the spirit 🙂 All the best with school project!!!
hello! can this move side to side instead of flipping front and back?
Hey 🙂 In general, anything you imagine, you can do 😉 This video is about the card flip effect though! I've also created a video about the slide-in overlay effect, feel free to check it out, maybe it is closer to what you are looking for! All the best, keep coding 🙂💙
@@CodingJourney Thank You for your reply! I am actually looking at this: th-cam.com/video/pZZAVRHKsvg/w-d-xo.html , will your tutorial be able to do that?
No, that's an entirely different component! You can ask that specific creator for guidance! Good luck 💙
You write ( div.flip-card ) then it's to be ()
what is a shortcut?
Hey! 🙂 You can do this due to the Emmet plug-in (if you are using Visual Studio Code then it's already there, otherwise you may have to install it).
So by typing:
div.flip-card + enter/return (or tab)
You get:
For the special case of "div" you can simply type:
.flip-card + enter/return (or tab)
And you still get:
I hope this answers your question! All the best, keep coding 😉
@@CodingJourney i used Adobe Dreamwewer, How could i do?
Unfortunately I've never used the Adobe Dreamwewer editor so I can't give you specific instructions on how to enable Emmet. I'm sure you will eventually figure it out, good luck!
The flip effect is buggy on Safari and iOS devices. But otherwise a good tutorial.
Safari is the new IE
How to make it click to flip ?
Hey man! I think explanation for what you are asking for, starts at 18:00. Good luck!!