Create a 3D flipping animation with HTML and CSS

Key Takeaways

welcome to my channel if you don't already know my name is Kevin and here at my channel we make weekly tips tricks and tutorials based on frontend stuff HTML CSS and little doses of JavaScript every now and then so I was going through my Twitter feed uh today and I came across a post and I've put the post here you can see it sort of scrolling by um for these little 3D flip card things and I was like oh that's cool and then one of them really caught my eye and then another one and another one and there's this really cool I've flipped stuff with CSS before but I never flip stuff like this and at first I'm like maybe there's some JavaScript in there clicked checked out the code no no JavaScript and um I've known about 3D transforms and perspective I've played around with it a little bit this was so easy to do um and a lot of fun so in this video we're going to be exploring here we go I'm going to put it right there you can see it this nice sort of flippy thing how it works and everything about it and it's really not too complicated to do um so we're going to be designing doing the whole thing from scratch how I designed it but um yeah just a lot of fun so let's go and check that out right now all righty so as usual here we are in codepen so if you'd like to follow along you can the link is in the description below and um there's this really long URL you could also type into your browser but the link for that will be in the description below CU that' be a lot easier for you um so what are we going to be doing we're making our cool card flip thing so the first thing let's do now is just make my card and I won't even worry about the CSS let's come up here um I'm just going to do a card um so for my card I want to have a some content and the way I'm setting this up I think is kind of important um so we're going to have the content of my card and close div so a little bit of extra markup on here actually let's just do card oops content like that um I use a bit of the bem naming convention yeah the reason I'm doing this is when we hover over something I want this to be what's flipping and not the card itself or then the hover might glitch out and do something really weird when it's like halfway through the flip so the cards always going to stay still and it's the content inside that's actually going to be what's flipping around that is uh a little important step along the way um and then in here we need two parts we're going to need a div class of uh card front and we'll close that off and then we're going to need a div class of card back close div um because this is an example I don't really need to be using bem here I could just be having like content front back and all of that but I'm assuming you know I'm pretending this would be part of a bigger architecture and this naming would help us out in the long run so that's why I'm doing it like this um in the front here I'm just going to do a H3 and um again I'm going to do this a little bit as if it was part of a bigger uh thing so we're going to have a class on here of card title and um we're going to do a little like Fair themed here I think so we're going to put in um the fair and over here let's come in with a paragraph of class class no card subtitle and um time for some fun uh there we go close paragraph the order here is going to be important we're going to actually flip that over after but I'll talk more about that once we get there and then in here um I'm just going to put a paragraph uh we'll give this a class too class equals card body so this is like the main text of my card um I don't really know what i' do here so I'm just going to offscreen I have a really simple um just something we'll be pasting in there this would be some longer text that gives a description of things um that would go insided I guess so nothing you know not sure what I want to be putting in there but I just want something it's like a medium length text that could be uh in there great so now we actually need to style it up so as far as the markup goes this is it and as I mentioned before it's important to have this card content inside of the card it is a little bit of extra markup that we wouldn't necessarily need but it's going it's going to be sort of necessary um to make this flip thing work and I'll show you exactly why uh once we start doing the CSS on this then this is going to be the front and the back of my card so I think that part is pretty straightforward all right so just a quick word here you might notice that I'm in Chrome now instead of Firefox and it's not because uh I want to be it's just because I'm having some issues with Firefox nightly on my computer it just doesn't want to open all of a sudden uh tried reinstalling and doing a few things but I'll get that sorted out when I'm not trying to record a video um so uh yeah we're going to keep uh keep this one going um so all the HTML here is all done and we're going to be moving on to the CSS um you'll see here just a very basic reset getting rid of all my margins resetting my box sizing under the Border box which makes it a little bit easier and this I would never normally have on a site it just centers the content for me on the middle of the screen so for code pens like this it is a perfect um so the very first thing I'm going to do is let's just do some really basic styling here so I'm just going to give my card a width of like 400 pixels and actually I I think that's about it for the moment um let's come on to my uh card content next so card content and I think for now I'm just going to do a text align Center on this we're going to be coming back and jumping around sort of in all the different pieces here um so we can see how this is actually going to work and actually one more thing I'm going to do a position relative um just so I can come down here and do a uh my card front and my card back and for these ones uh let's give them a position uh solute so I can get them to overlap each other because they do need to be on top of each other for this effect to work uh so we'll do a top of zero bottom zero left Z right zero and as we can clearly see they're sort of stacked on top of each other like that um all right so I think the for now show you sort of let's start diving into some of the cool things we going be looking at um and the very first thing we're going to have to look at is called preserve 3D and it comes um actually it's from our transform style I wrote an article on this this past weekend so if you uh head on over to my website you can read a little bit about that there but um to dive into what it's doing um let's start by giving this a hover effect so when we hover on top of my card uh so let's just do uh do card hover I want the card content to rotate um and the reason that I'm doing this like this and this is the whole reason that we have this card content inside my card is because uh I'll show you why actually so let's just say transform I'm just going to do a rotate like this for a second and we'll just do 90° um so you can see when I hover on top it's rotating like that and it's going kind of crazy so um when I have it on top of my cards let's just give this a background for a second background of pink um so we can see my card oh and of course everything right now is um position absolute in here so the background's not going to work so uh um my card content let's just give this some padding for now 5m we're going to want some padding on there anyway so now we can at least we can see our card and you can see that when I hover on top of my card I want the card content to rotate the reason I don't want the whole card itself to rotate is cuz this can happen so this is as soon as I'm going on top it's rotating but then it's I'm not on top of it anymore and it goes all glitchy so I want the inner section of my thing to rotate but I don't want the actual card to rotate um so that's the idea with this now rotate we do that and let's also come on to my card content this a transition transform and I guess this should actually be just for uh readability sake I usually like having my hovers after um transform and we'll say like 3 seconds for now so it's nice and long so we can see it so now we can see it rotating there now I don't want to use a normal rotate what I want to do is want it to rotate on the Y AIS so when I have her now look at that see how it's getting flatter flatter flatter and now it's coming back like that so that's kind of fun right so we can see it's rotating um in a way that's kind of interesting but I also don't want the background to be on my here um for now let's put our background on here so we can see that it looks like the whole thing is sort of flipping like that so that's the start of what we want to be doing um and maybe instead of what we don't want here is 90° we want to do half a turn right so would be 180° or if you don't know about it you have the 0.5 turn which I only learned about recently thanks to West boss so you can do a turn unit so it's half a turn so that's going to give it a complete flip so we're going onto the back of our card so I think that you know you can already see um how all of this is coming together now what I'm going to do is I'm actually going to take my card Front let's do card Front give this a background of red and let's just give it a top actually I can leave it like this for the little demo that I want to do right now this is going to work fine um I'm going to give this a transform rotate y 90 or let's do a uh 025 turn and it disappears and it disappear we got some glitchy stuff going on oh there we go okay that's more what I was expecting to happen um so it's disappearing cuz just like this this so I do a 0 25 turn the whole thing is when I rotate like that it goes and then it stops when it's facing us pretty much and it's completely flat so we don't actually see it so if my card Front is rotate at the same thing like that what's happening is we just don't see it and it's always going to do this relative to the parent and it stays flat on the parent so if I actually change this to like A5 turn you can see it's there and it sort of just like squished on the parent um which isn't really what we want we want this to act independently from its parent so to be able to do that on the parent element what we want to do is come in with a transform style now the only options for transform style are flat which is exactly what's happening now the children are flat on the parent or preserve pre serve 3D and now you're going to see this cool thing when I hover um this is now independent in the 3D space see what's going on there that's kind of cool right so as the pink one is rotating away my red one is rotating back in so right away you could do some cool stuff with this um to start with it's not the effect that I'm after today but it's just to give you I think this illustrates really well what's actually happening with The Preserve 3D in this case though instead of using The Preserve 3D and I'm going to take my background round off of this as well um what I want to do and I think just to keep the text off the top here uh let's add some padding on here padding of like 2m and let's just do a yeah so we have the padding on there just so it's not sort of stuck like that okay so what I'm going to do now and should I do this on the card Front I think I'm going to do this on the individual items inside right away um so what this preserve 3D is going to open up is it's going to open up this cool possibility of having so let's do my card title and I'm going to do a transform translate Zed so you probably know translate X if I do this and like 100 pixels it's going to move over by 100 pixels um or just make it like I don't know 200 yeah we can see the the title is sticking out the side now um I can do it on the Y AIS so that's moving it up and down so it's going to move it down 200 pixels and then there's the Zed AIS and let's also make this bigger uh font size of and I I know it's all muddled and on top of each other right now but we'll get there in a second uh font size of like three R there we go that looks a little better um and we can see it a bit clearer which is good so what the translate Zed is doing is it's actually pulling it towards us so it's on the Zed axis which is facing us and away from us so it's pulling it towards us now one thing is normally in the real world if something gets closer to you it gets bigger that's not going to happen with this but you can see that um so when I do this nothing really changes um except now when it rotates check that out Isn't that cool it's like hovering away from everything and it's hovering 200 pixels away from everything and the reason this is working is because of our little preserve 3D that's going on over here um now this is also going to break probably at one point but for now we can see that oh I just find that so cool so now now instead of doing a half turn like this let's just bring this or a quarter turn I should say we'll bring it to a half turn so it's going to flip all the way right over like that so we can see the whole thing just swinging around now there's obviously another issue with this um and even to to make it more obvious that there's an issue with this um or what I'm eventually want to do is when it flips you can see all this text is backwards now the stuff from the back is backwards right so let's go to my card um back and what I'm going to do is a transform rotate y.5 turn on here so it's backwards but now when I hover it's becoming the right way around and this one is backwards now um so and let's just give this a background of like Light Blue for now um now so you can see it's still working but because uh um we have another issue now is that this is you know if we look here in the order the back is coming second so it's going on top of this so it's actually covering it the only time we see it it's when it's anyway causing a whole bunch of issues um so we're going to add on my card front and my card back something called backface visibility visibil it and it's going to be hidden and this pretty much comes into play when things are backwards so you can see that it's actually disappeared now um so it's hiding something if the back of that thing is facing me so my card back is Now hidden and when this flips over to the other side the other one is Now hidden so if I turn that off just to go back over it um actually let's even turn off this light blue background um so now I can see both texts the whole time so the whole time this is happening I see all my text and everything's really awkward and as soon as I turn that on um I now only see the front and now that I'm it's going to swing around and I'm going to see um the back there um the one thing because this the the fair is on um is sort of screwing everything up there cuz it's in the 3D space so you can see actually the text time for some fun is disappearing um so with that I am going to keep a background on here and if you'd need it to be this could be white and I think that would solve yeah there we go so we can see that's it's hiding behind that so I'm going to keep that on the light blue for the moment and um just you know let's add this little translate Zed here also uh so I have my subtitle and I have my card body so um I'm actually going to change this let's go away from 200 pixels and say it's like five R uh yeah we'll do five R for now and then I can have my card body coming in at a uh transform transl translate Z of like two RAM and I made a typo here somewhere transform um body and I also have my do card subtitle and let's just copy this one and so now we can if we have all of that set up like that so subtitle with uh 2or there and now we can see that it's working on one side but not the other and just to make this um a little bit more confusing uh what we're going to do is on my card Front let's give this a background color too background of light green um actually that's still working there for the front I'm actually I'm a little bit surprised the front section's working cuz I thought I was going to have this problem everywhere um but what we're going to do is just take this uh transform style preserve 3D and also put it on the card Front and the card back here um so it's not only being used on uh the card content and now we should see there we go everything is sort of coming off on its own level I'm going to make this a little bit bigger let's say this is six uh four and three or something like that just so everything is sort of getting its own distance away from what it's on so I think that's just a really cool and fun little uh effect we have going on there so really really neat and I really like that um so what I'm going to do now is actually just speed all of this up add some we're going to hit um some speed coding for a second here just I'm going to fix this up and make it look a little bit nicer add some more elements to this whole type of thing um just to make it look a little bit fancier and uh I'll sort of go over the things I'm going to use some um CSS variables I think to set this up um and make the whole thing just look you know a bit sharper and go through I'll use a pseudo element in there too and uh yeah I'll see you on the other side of that enjoy [Music] he [Music] he [Music] he [Music] all right and there we have it I hope you like what it looks like um I think it looks pretty good in the end maybe a lighter font would work better here but overall I think it's uh pretty good so basically what I did here is I created three levels um in as CSS variables and it just makes it easier to sort of play with them and if I ever you know say I find they're too drastic I don't have to worry about where they are in the rest of my document I can quickly just come here and change those um for my levels as far as the other stuff I've done here I've done a background blend mode for my image here so um I brought my image in and then I was playing a lot with the color that I was using here um to try and get that I have my pseudo element as like a border there so thought that was a fun thing um you might have seen that I was doing some inspect elements and stuff and if you have to do it make sure you don't have any typos I had this as display and absolute wasn't even spelled right U so that was a little embarrassing but uh we get there in the end um you know maybe I could put a border on this one too or something just to fancy it up but uh overall I'm pretty happy with that I think it looks pretty good uh another thing actually just before I go um you'll notice that I changed the order of these not by changing the order here but by changing the order where was it here so because I'm using grid and if you're using flexb you know this would have worked fine with flexbox um by putting the order two it's bringing it down below the subtitle even though in the markup they're this way around and for accessibility this can be pretty good because at least we're still uh getting the title before we're getting to a paragraph text or something else but visually speaking I thought it was just a little bit more fun doing it this way um that you know that it's hard for me to CU it keeps rotating but the time for some fun it's really not that important it's a little um something extra that it's just there but the fair the name of it's really what's important so um visually this still U sorry this still is clearly the uh the hierarchy King here it's what people are going to be reading um but for accessibility sake it's you know using the order to change it up is a good idea instead of changing the order in the markup CU this just makes a lot more sense uh and there we have it yeah I hope you really like like that and um let me know if you like The Little Speed coding thing here at the end that went over the design that I did cuz uh if you like it I'll include things like that a bit more often once the concept is done just the the making it look good of course this finished pen will be um accessible to you the link for it is down in the description below if you want to check out a bit more of the Desy stuff that I did here along the way with the night just cool I love that so much I think it's a really cool effect and I think you could use it in more interesting ways than this you're not always going to have things you're going to want to flip over but it sort of I have some ideas now on different ways I think this could be used in fun ways um so yeah I think it's definitely worth exploring and playing around with I hope you liked it too if you did leave a comment down below to let me know or hit that thumbs up if you have any questions comments feel free to leave them down below as well a really big thank you to my patrons if you don't know about patreon it's a place you can go to help support creators who make content that you appreciate and so um the people my patrons that I currently have just massive thank you for helping support me in what I'm doing here I really really appreciate it and it helps make these videos possible so thanks a lot for that and of course until next time don't forget to make your corn on the internet just a little bit more awesome