Create a 3D flipping animation with HTML and CSS

welcome to my channel if you don't already know my name is Kevin and here my channel we make weekly tips tricks and tutorials based on front-end stuff HTML CSS and little doses of JavaScript every now and then so I was going through my Twitter feed today and it came across a post and I put the post here you can see it's sort of scrolling by 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 another one and there's this really cool if I flip stuff with CSS before but I've never flipped 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 I've known about 3d transforms and perspective I've played around with it a little bit this was so easy to do and a lot of fun so in this video ring me exploring here we go I'm gonna 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 so we're gonna be designing doing the whole thing from scratch I designed it but yeah just a lot of fun so let's go and check that out right now alrighty so as usual here we are in code bin so if you'd like to follow along you can the link is in the description below and there's this really long URL you could also type in your browser but the link for that will be in the description below cuz that'd be a lot easier for you um so what are we gonna be doing when we're making our cool card flip things 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 I'm just going to do a card and 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 so we're gonna have the content of my card and closed div so a little bit of extra markup on here and it shows just your card oops content like that 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 gonna stay still and it's the content inside that's actually going to be what's flipping around that is a little important step along the way and then in here we need two parts we need a div class of card front and we'll close that off and then we're going to need a div class of card back [Music] close div because this is an example I don't really need to be using them here I could just be having like content front back and all 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 in the front here I'm just gonna do a h3 and again I'm going to do this a little bit as if it was part of a bigger thing so I'm gonna have a class on here card title and we're gonna do a little like fair themed here I think so we're gonna put in the fare and over here let's come in with a paragraph class class and it will card subtitle and time for some fun there we go closed paragraph the order here is going to be important we're gonna actually flip that over after but I'll talk more about that once we get there and then in here I'm just gonna put a paragraph we'll give this a class to class equals card body so this is like the main text of my card I don't really know what I do here so I'm just going to off-screen and I have a really simple just something we'll be pasting in there this would be some longer text think is a description of things that would go inside it I guess so nothing you know I'm 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 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 to make this flip thing we're and I'll show you exactly why once we start doing the CSS on this then this is gonna 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 I want to be it's just because I'm having some issues with Firefox and nightly on my computer it just doesn't want to open all of a sudden I tried reinstalling and doing a few things but I'll get that sorted out when I'm not trying to record a video so yeah we're gonna keep on keep this one and going so all the HTML here is all done and we're gonna be moving on to the CSS 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 at just centers the content for me on the middle of the screen so for code bends like this it is a perfect so the very first thing I'm going to do is let's just do some really basic styling here so I'm just gonna get my card a width of like 400 pixels and actually I think that's about it for the moment let's come on to my card content next so card content and I think for now I'm just gonna 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 so we can see how this is actually gonna work and actually one more thing I'm going to do a position:relative I'm just so I can come down here and do a my card front and my card back and for these ones let's give them a position so loot 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 so we'll do a top of zero bottom zero left:0 right:0 and as we can clearly see they're sort of stacked on top of each other like that alright so I think the for now and show you sort of let's start diving into some of the cool things for me looking at and the very first thing we're gonna have to look at is called preserve 3d and it comes like I'm actually it's from art transform style we're at an article on this this past weekend so if you head on over to my website you can read a little bit about that there but to dive into what it's doing let's start by giving this a hover effect so when we hover on top of my card so let's just do dot card cover I want the card content to rotate 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 I'll show you why actually so let's just say transform I'm just gonna do a rotate like this for a second and we'll just do ninety degrees so you can see when I hover on top it's rotating like that and it's going to kind of crazy so when I hover on top of my cards let's just give this a background for a second a background of little thing and so we can see my card oh and of course everything right now is position absolute in here so the background is not gonna work so my card content let's just give this some padding for now five and we're gonna 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 because this can happen so this is as soon as I'm going on top its rotating but then it's I'm not on top of it anymore and it goes all glitchy so I want the in our section of my thing to rotate but I don't want the actual card to rotate so that's the idea with this now rotate we'll do that and let's also come on to my card content under this a transition transform and I guess this should actually be just for readability sake I usually like having my hovers after transform and we'll say like three 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 axis so when I hover 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 in a way that's kind of interesting but I also don't want the background to be on my here 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 and maybe instead of what we don't want here is 90 degrees we want to do half a turn right so it'd be 180 degrees 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 on to the back of our card so I think that you know you can already see how all of this is coming together now what I'm gonna do is I'm actually going to take my card front let's do card front give us 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 gonna work fine I'm gonna give this a transform rotate y9r let's do a point two five turn and it disappears and it disappeared what we get some glitchy stuff going on oh there we go okay it's more what I was expecting to happen so it's disappearing because just like this so I do a point two five turn the whole thing is and when I rotate like that it goes and then it stops when it's facing us pretty much it's completely flat so we don't actually see it so if my card front is rotated 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 a point 15 turn you can see it's there and it's sort of just like squished on the parent 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 the serve 3d and now you're gonna see this cool thing when I hover 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 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 then taking my background off of this as well what I want to do and I think just to keep the texture off the top here now 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 gonna do now and should I do this on the card front I think I'm gonna do this on the individual items inside right away and so what this preserve 3d is gonna open up is it's gonna open up this cool possibility of having let's so let's do my card title and I'm gonna do a transform translate Z so you probably know translate X if I do this and like 100 pixels it's gonna move over by a hundred pixels all right just make it like 200 yeah we can see the the title is sticking out the side now I can do it on the y-axis so that's moving it up and down so it's gonna move it down 200 pixels and then there's the z-axis so let's also make this bigger font size and I know it's all muddled and on top of each other right now we'll get there in a second font size of like 3 rim there we go that looks a little better and we can see it a bit clearer which is good so with the translate Zed is doing is it's actually pulling it towards us so it's on the Zed access which is facing us and away from us so it's pulling it towards us now one thing is normally in the real world is something it's closer to you it's bigger that's not gonna happen with this but you can see that so when I do this nothing really changes 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 preserved 3d that's going on over here 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 then 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 gonna 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 and even to make it more obvious that there's an issue with this 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 back and what I'm going to do is a transform rotate Y 0.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 so let's just give this a background of like light blue for now now so you can see it's still working but because 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's when it's anyway causing a whole bunch of issues so we're gonna add on my card front and my card back something called back face busy bill it T busy bill it T and it's gonna be hidden and this pretty much comes into play when things are backwards so you can see that it's actually disappeared now 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 actually let's even turn off this light blue background 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 I now only see the front and now that I'm it's gonna swing around and I'm going to see the back there the one thing because this the the fair is on is sort of screwing everything up there because it's in the 3d space so you can see actually the text time for some fun is disappearing so with that I'm gonna keep a background down here and if you 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 gonna keep that on light blue for the moment and um just you know let's add this little translate Zed here also so I have my subtitle and I have my card body so I'm actually gonna change this let's go away from 200 pixels and say it's like five RAM yeah we'll do five RAM for now and then I can have my card body coming in at a transform translate Z of like two RAM and I've made a typo here somewhere transform body and I also have my thought 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 200 or is there and now we can see that it's working on one side but not the other and just to make this a little bit more confusing what we're going to do is on my card front let's give this a background color to the background of light green actually that's still working there for the front I'm actually I'm a little bit surprised the front sections working because I thought I was gonna have this problem everywhere but what we're gonna do is just take this transform style preserve 3d and also put it on the card front and the card back here so it's not only being used on the card content and now we should see there we go everything is sort of coming off on its own level I'm gonna make this a little bit bigger let's say this is 6 4 & 3 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 effect we have going on there so really really neat and I really like that so what I'm gonna do now is actually just speed all of this up add some yeah we're going to hit some speed coding for a second year just to I'm gonna fix this up and make it look a little bit nicer add some more elements to this whole type of thing just to make it look a little bit fancier and I'll sort of go over the things I'm gonna use some CSS variables I think to set this up 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 yeah I'll see you on the other side of that enjoy [Music] [Music] [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 pretty good so basically what I did here is I created three levels in 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 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 I brought my image in and then I was playing a lot with the color that I was using here to try and get that I have my pseudo element as like a border there so I thought that was a fun thing you might have seen that I was doing some inspect elements and stuff in it if you have to do it make sure you don't have any typos I had this is display and absolutely wasn't even spelled right so that was a little embarrassing but we get there in the end you know maybe I could put a border on this one too or something just to fancy it up but overall I'm pretty happy with that I think it looks pretty good another thing actually it was before I go you'll notice that I changed the order of these not by changing the order here but by changing the order or was it here so because I'm using grid and if you're using flexbox you know this would work fine with flux box by putting the order - it's bringing it down below the subtitle even though in the markup there this way around and for accessibility this can be pretty good because at least we're still 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 and that you know that I it's hard for me to highlight because it keeps rotating but the time for some fun it's really not that important it's a little something extra that it's just there but the fair the name of it's really what's important so visually this still sorry this still is clearly the hierarchy King here it's what people are going to be reading 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 because this just makes a lot more sense and there we have it yeah I hope we really like that and let me know if you like the little speed coding thing here at the end that went over the design that I did because if you like it all include things like that a bit more often once the concept is done just the the making it look good and of course this finished pen will be accessible to you the link for it is down in the description below if you want to check out a bit more of the design e stuff that I did here along the way well the night just cool I love that so much I think it's a really cool effect and I think you can use it in more interesting ways than this you're not always going to have things you're going to flip over but it's sort of I have some ideas now on different ways I think this could be used in fun ways 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 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 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 quantum internet just a little bit more awesome

Channel: Kevin Powell

Views: 54,164

Rating: 4.9638438 out of 5

Keywords: Kevin Powell, tutorial, html, css

Id: FeJEEE3zc4U

Length: 24min 44sec (1484 seconds)

Published: Wed Oct 10 2018