3.1 Next-Level 3D Transforms

[MUSIC] Welcome back to the course. In this lesson I'm gonna show you how to create some awesome 3D transforms in Adobe XD and also animate them. Now if you're looking for an introduction to 3D transforms I also did a short tutorial on the topic on Envato Tuts+ and you can find a link to it down below. This is a little bit more advanced. So et's go ahead and get started. This is what we'll be creating in this lesson. We have a simple carousel and it goes something like this. Right we can see the images they they go from that perspective to this 2D look. And we also have an interesting glow that matches the image itself. You can see pretty smooth transition. And this is actually very easy to create with XD. So let's get started. Here I have a blank art board and the three images that we're gonna use. I got these images from Mixkit and you can download them yourself for free, using, the links in the lesson notes. So then I'm gonna take these images and I'm gonna move them up, like, so. Then I select all of them. I'm gonna actually group them up and I wanna make sure that I have the correct ordering. So, image 2 actually goes above image 3 goes above. So image 1 is the one on top, followed by the other two. So let's align these, like so. And then, I'm actually gonna start making these images a little bit shorter. Actually, I don't need this group. So we're gonna take image 3, which is on the top. And we're gonna make it 700 pixels tall. This image 2 is gonna be 750 pixels tall. Now, before we get to the actual 3D transforms, we need to add that fancy glow that I showed you around these items. So how do we do that? Well, it's actually very simple. Let me show you. Let me start by hiding these images first. So here I'm actually using a mask for these images, and what I'm gonna do is duplicate this image. I'm gonna go back to the parent element. And I'm gonna resize it like so. I can even disregard the aspect ratio and make it exactly the size of that mask. So now what I'm gonna do is go to the inspector and check background blur, but instead choose object blur. Amount, 30%, or 30 should be enough. But now, I need to move it behind my main image. And just like that, we have a nice glow, And actually want to name this shadow. And we can resize this to whatever size we want. Right, so that's our first image. Now we just have to repeat the process with the other two images. So in here, we're gonna copy that, paste it in. And then we go to object blur. We move it behind, and we just make it slightly bigger, like so, right? So that's the second image. Let's do the same for the first image. I'll push it behind the main image. And if you feel like this the shadow is a bit too intense you can actually lower its opacity. But I think it looks pretty good like this. So now, once we have these three images and their shadows, we can go ahead and select all of them, align them to the middle, and let's bring up 3D transforms by clicking on this button. Or by pressing Command or Control T. And we're gonna rotate these elements, all of them 45 degrees on the x-axis. And I'm just gonna bring them down like so. And then I'm gonna go to each one and I'm gonna hide their shadows. Now, the reason we're not seeing these images properly is because we actually have a different z position for each. So, while image 3 should be on the top, it's currently sitting at the bottom. So let's go ahead and fix that. We'll set the Z index here to five, image two, we'll set it to two or whatever. And image 1, we can just set it to zero, all right. And finally, what we can do is we can lower the opacity on these images. So, 90% on image 3, 50% on image 2, and I'm using the numbers on my keypad from zero to nine to lower the opacity of these images. Alright, so that is our starting point. Now, let's go ahead and add that button. I'm just gonna paste it in here. It's just a simple button and that should take us to the second art board, so then let's duplicate this bit. And let's go ahead and hide this button right here and lower it's opacity. And then this first art board should show image 3. Let's reset its rotation. And that size and let's put it here, just like that. And also I'm gonna display the shadow. And one last thing thing I wanna do here is for image 2, I want to lower the rotation here to 40 degrees instead of 45. Okay, so that is artboard two. Now let's do another one. This is artboard three. In this case, this one will get rotated, something like that to like -75. We're gonna bring it to the very top and we're gonna lower its opacity all the way. And then we're gonna bring this up. Bring the opacity to 100% rotation here to zero. And we're gonna align it in the middle and we're also gonna display the shadow. And finally, let's, change the opacity of this element here to 50%. And let's also change its rotation to 40 degrees there. And finally, Let's do this. Let's rotate this again to 75 negative, bring it up, lower its opacity, and let's display this one correctly. And let's display the shadow. Finally on the last slide, this one should be displayed on the top zero opacity. And I'm just gonna paste that button that allows us to restart the carousel. All right, so now, let me actually move these down a little bit. And let's focus on the prototyping stage. So I'll go to prototype and we're gonna start right here. We'll go to this one tap, auto animate. Ease in and out and we can go for like 0.8 seconds. This one, the trigger will be the actual image. Same goes for this. Same goes for this. In here We can actually go all the way back to the initial artboard and let's give it a go see how this works. [SOUND] Pretty cool. Now there are certain things that I noticed are not particularly correct. For example, on this first artboard I forgot to change the opacity of this element back to 100%. And we're also missing the animation for this button. So let's copy it from here. Let's also paste it in here and we're gonna move it up and lower its opacity. And I'm also gonna copy this, Paste it in here, move it down and lower its opacity. So now we should be good to go. Start first one, second one, third one. Okay, we only need to add a nice animation. For this button between this artboard and this artboard. So copy it here, paste, bring it down, opacity to zero And now, It goes like that. So all the elements are now nicely animated in between the slides. Now if you want to be fancy about this, you can actually add a small parallax effect. Because the images are set in a mask you can actually decide to make these bigger or smaller. Right, like that. And like that. So now it's gonna look slightly different. You're going to notice that as I'm starting the carousel the image here, or the actual mask will get bigger of course but the image inside will also get bigger. See? So that's pretty cool. That's a more advanced take on working with 3D transforms in Adobe XD and that's it for 3D transforms. Now, let's move on and talk about creating layouts. If you've ever worked with Figma and Figma's Auto Layout feature, then you know how powerful that is. Well, XD has something similar called Stacks. Stacks allow you to space elements evenly in a group, move them around very easily and also add padding. So let me show you how you can work with that in the next lesson.