From the course: Learning Adobe XD

Card flip - Adobe XD Tutorial

From the course: Learning Adobe XD

Start my 1-month free trial Buy for my team

Card flip

“

- [Instructor] In this exercise we are going to use a 3D transform to do a card flip. To get yourself started, open the card flip file found in your chapter download. And when it opens you'll see we've got two cards here. And this card here is the front card. If I select it, you can see it's the front. And this card here is the back card. Now I've got 3D transforms turned on and that's the first thing you want to do. And you can do that by just clicking this little cube here or pressing command or control T. Okay so let's get started. So the key right now is to get this thing set up so that this selected card, the back card, is actually set up so if you were to turn the card over it would be backwards. So first thing we want to do is give it a rotation of minus 180 degrees on the X-axis. So now it's backwards. This is good. And the other thing is, is when we're looking at it straight on, we want it to be behind the front card. So we're going to give it a zed value of minus one. And the next step in the process is select your front card and let's make sure that it really is at the front. And we're going to give it a zed value of one. Okay so we're all set up. Now the next thing we got to do is get these cards lined up. So we're going to align on the centers. Just to make sure they're all together. And with the two of them selected I'm going to press command or control G, if you're on a PC, to group it. And we can just leave it at that. Now we need to duplicate the art boards because we're going to tap on this card here and it's going to flip over to show you the back. So you select the card and it's command or control D. And we'll name this one flip. Okay so the first thing we're going to do is we're going to rotate this thing on the X-axis. So we'll just rotate it. Just get it turned around. And you can see this isn't working. And the reason is really quite simple. This is in front of everything. So the first thing we got to do is deal with the ordering. So you're going to select the front card. And you're going to send it to the back. So it's minus one. And then we're going to select the back card and we're going to give it a value of two to bring it to the front and there it is. Now the other thing we're going to do with this card is we're going to change its rotation value here on the X-axis to zero. That puts it back. And there we go. So we're now good to go. So let's wire this thing up And we're going to use this little icon here to flip. So we're going to go to prototype mode. And we're just going to keep clicking until we hit that. And we're just going to direct that over. And we're going to use the tap trigger with auto animate. We're going to flip. And we can use ease out. And let's make it half a second, point five. And let's give it a test. So we come here. And there's the flip. Okay so the keys to this technique are to play with the zed axis for the front and the back and also take the back and turn it backwards when you start. So that's that minus 180 degree value on the Y-axis. And then when you come over to the flip just flip the entire card back to zero and change the zed positions for the two items so that the card comes to the front. I used the value of two on the zed axis and minus one for the front card on the zed axis. And then when you flip it everything is wonderful. And if you want to, you know, really have some fun with this. Let's select this icon. And we'll just do the same thing back. So we'll just test it. Boom. Boom. So there you go. There's a card flip.

Contents