 Hello and welcome to this supercharged TLDW. Last week, Summer and I built a 3D card flip. Let me show you what we got to building. So you can see I've got this card on screen. And when I click on it, it flips over in 3D. And there are shadows and all sorts of things underneath as well to make it look just right. Now the other thing I've done is I've taken a timeline recording. And you can see that it's hitting a comfy 60 frames a second. And it probably would, well, it is doing the same on most mobile devices as well. So with that said, let me show you actually how we got to building it. And of course, that requires a trip to the most famous corner of them all, Theory Corner. Hello, my theoretical chums. Welcome to Theory Corner. So let's do a little bit of 3D theory. Not loads. Don't worry about it. It's not that bad. So imagine we have our axes, x, y, and z, or z, depending on what you prefer. And imagine our screen is kind of at the front here. And so is the card. Now what we need to do is we need to push the card back into z-space so that it's got space to kind of come forward and flip over and go back again. So we push it back in z-space. Now the way we do that is we put perspective on the containing element. And the perspective value is always in pixels, according to the spectrum, mostly is anyway. And so we push this card back, saved by 200 pixels or something. And when we do that, we find that the card gets smaller as it does in real life. The further things are away from us, the smaller they appear. So that's fair enough. But we don't want the card to appear small necessarily. We just want it to start at its actual size, but be 200 pixels away from us. So what we do is we look at the spec and it says, well, in order to figure out how much something has been scaled down, you take the perspective value and you divide it by perspective minus the distance that you've moved your thing. So let's say we've got a perspective value of 500 pixels to figure out what we need to do for the scaling of this card. We say 500 over 500 minus 200 because we moved it minus 200 pixels in Z. That tells us that we've got to scale down. It's scaled down by 0.71. Well, we want to scale it up. So we have to do one over that value. So we can scale it by 1 over 0.71, which works out at a very convenient 1.4. So now our card is scaled up. What we can do is we can set up an animation to bring it forward, flip it over, and push it back again. So that's just the 3D card flip. We'll talk about the shadows and so on when we get to the code. In fact, talking of code, let's go and look at some. Welcome back to the codey bit. Now, what we'll do is we'll have a look at some of this code. In fact, let's look at the HTML first. We have an SC card. It's a custom element. We normally do this. It's just for convenience because it's actually quite handy to do that. You don't have to do that. It would work just fine if you had divs and so on. And for now, we can ignore the attributes that we've added on here. The main thing is we've got this front and we've got this back. And in fact, if we look at the styles for this front and back, mostly it's just going to be absolutely positioned and so on because we want the front and the back to appear over the top of each other. But the super interesting bit, I think, is the back face visibility set to hidden. We do this because we want to make sure that even if these cards, the two halves of the card, are placed over the top of each other, if one's got its back to us, we don't see it anymore. And that's actually a really important thing here. We need to make sure that the only the side that is facing towards us as the camera is the one that's actually visible. So we switch back face visibility to hidden for the front and the back of the cards. Now, when it comes to the JavaScript, most of the time, most of this code is fairly sort of boilerplate, I suppose, except for this actual flip function, which is sort of the meat of what we actually get into. So let's have a look at that. Now, what we're doing is we're setting up, first of all, we're setting up this scale, which we talked about over here in Theory Corner. We need to know how much our card needs to be scaled up by. Now, I've hard coded these values. A more generalized version, you take the actual dimensions yourself and you'd figure out exactly what you need to do. I'm not going to do that in this particular situation, but you can do that. Because what we said over there, it's actually, I've inverted it. So rather than it being 500 over 500 plus 200, I've actually done 500 plus 200 over 500. That's going to give us the 1.4 value here. Okay, with the scaling done, let's talk about side one and side two. Now, the card could be with its back facing to us or its front facing to us, so we just call it side one and side two, and we just choose whichever one of these is gonna make sense depending on whether the card's facing us on one side or the other. Side one, side two, they're pretty much the same thing. They're an array of keyframes and each keyframe is an object. And in this case, we have the transform. So let's step through what we do for side one. Basically, what we're saying here is we're gonna push it back 200 pixels like we discussed. We're gonna set its rotation to zero degrees and we're gonna scale it up so that it looks at the correct size. Then we bring the card forward by 100 pixels and we leave the rotation where it is and the scale where it is as well. Next keyframe, we're gonna be still at minus 100, but this time we're gonna rotate the card across the X or the Y axis, depending on which one we want to use, by 180 degrees. And then finally, we're gonna push the card back to minus 200 pixels in Z space or Z space. Side two is pretty much the same thing, except that instead of going from zero to 180 degrees, it's going from 180 degrees to 360 degrees. So we know that that's gonna work for us because basically we've got back face visibility hidden. We've got one card that's 180 degrees and one card that's the side of the card that's a zero degrees. And we'll just basically choose which one needs to be side one and which one needs to be side two. And you can see that is down here. There's the, if the card is on its front side, we're gonna animate front as side one. If it's on its back, then front will be animated as side two. So we basically hot swap between those two. So that gives us the card flipping over and that works just great. Let's have a quick chat about the shadows. Now I'm not gonna spend a lot of time on this because we spent a good amount of time on the live stream and if you've got a spare hour, it's definitely worth your time this one. There's loads of really interesting bits and pieces in there about why we can't use a blur filter, why we can't use box shadow. There's loads of stuff in there. But if you can't watch the live stream, there is actually an accompanying blog post. We'll put an annotation or put it in the description below. Have a read of that. It really does get into nine slicing and using SVG and how it is we're actually going to do a performance shadow that's disconnected from the element that it's actually shadowing. It's really an interesting technique. What we have though is we have two shadows. We have the, what I'm calling the umbra and the penumbra and the umbra is the really sort of tight shadow with a little bit of blur and it looks like, it looks like this. It's got a little bit of blur and it's SVG, which you can see here. It's just some SVG with a Gaussian blur with a deviation of two and we just have a black rectangle that's been blurred by it. The penumbra is a blurrier version. Again, it's got a blur of I think 12 pixels on it and what we do is we actually fade from one to the other. So when the card is like this and it's at the back of the 200 pixels back, we use that very tight, less blurry version of the shadow. Watch closely as we do the animation. We fade from that to the penumbra with a blurrier version and that is exactly what we'd expect in real life. As something gets further away from a plane, its shadow is going to get blurrier and bigger and so that's what we're trying to mimic here and it's a subtle thing, but it's going to give it the kind of feeling of reality and the code for it is very much the same as the other stuff. We have an umbra and a penumbra and we fade. You can see not only do we do the rotation stuff that we were doing before, we translate the shadows down and then back up again and we also fade the opacity. So you can see that the smaller, tighter, less blurry version goes from 0.3 to zero and then back up to 0.3 and the blurrier one follows it, moves in exactly the same way, same rotation and so on, but it goes from zero to 0.5 and then back down again. So it's crossfading between those two shadows to give us that effect. And finally, finally, finally, right at the end of this, we have that animation call for the pair of them and when the penumbra, the blurrier one, when it's finished animating, we basically unlock the card so that people can tap on it again and we flip the side. We know that we flip the card over so now we just say if you're on the front, you're now on your back and if you're on your back, you're now on the front and that is basically all that goes into this. So there you have it. That's how you can make a 3D card flip. You can check out the blog post on the shadows stuff and nine slicing, really interesting stuff there. You can have a watch of the live stream. That was about an hour and as I say, it's got loads of super cool stuff in there, definitely worth your time. And of course you can subscribe to this show and subscribe to this channel and you'll find loads of amazing content. They're definitely worth checking out. Ali Kass with Rob Dotten. I didn't have time to talk about the inert stuff that we're using here, but that's super cool. Definitely check out that show and I will catch you with Surma next time. Don't forget that you can subscribe. One of those two will work or you can watch the live stream and I am not going anywhere until you do one of those two things. Still here.