Create a Flipping Animation with 3D Transform Properties

In this lesson, we're gonna have a little fun using CSS transitions and 0:00 3D transforms to make the image gallery interactions look 3D. 0:03 We're gonna add a 3D flipping animation to the photo gallery. 0:07 We'll create a transition that flips the images over to show their title, 0:12 description and download button on the backside. 0:17 This will all be done with the rotate function and 0:20 you're also gonna learn a new property that gives you more control 0:23 over the behaviour of nested elements in 3D space. 0:27 So, let's get started. 0:30 Back in my workspace the first thing I want to do is animate 0:32 the photo rotations on hover. 0:35 So I'm going to give the photo div a transition. 0:38 So inside the photo rule, I'll add the transition property, 0:42 then I'll set transform as the transition property value. 0:46 I'll give it a 1 second duration and a timing function of ease-out. 0:51 Next, I'll remove the transform we applied in the previous video. 0:57 So I'll select and delete the transform declaration from the photo rule, and 1:02 now I'll target photo on hover and add the transform in this rule. 1:07 If you've checked out the HTML for this section, you might have noticed 1:18 the new class names added to the image and div nested inside photo. 1:21 So the image has a class of side A and the div containing the images 1:26 titled description and button has a new class of side B. 1:32 That side B div is positioned directly behind side A using absolute positioning, 1:39 so we don't see it yet, but I'll quickly go over to my style sheet and 1:45 change side Bs z-index so you can see it. 1:50 So I'll bring it up on the z-index. 1:54 With a z and x value of 100. 1:56 So, as you can see, the div has a blue background with a title, 2:02 description, and button, just as you have seen in previous lessons. 2:06 Okay. 2:18 So now, I'm going to give the photo div a rotation on the Y axis. 2:19 So, back in my photo hover rule, inside the transform value, 2:24 I will add the rotate Y function and set it to -180 degrees. 2:30 So the value -180 degrees rotates the photo div from right to left. 2:37 When it flips over 180 degrees, 2:44 we are able to see the reverse side of the images. 2:46 But what about the blue side B div position behind the images? 2:49 Why aren't we seeing those when the photo div flip over? 2:54 This has to do with the way nested elements, like side A and 2:58 side B divs, behave in 3D space. 3:03 The 3D space we defined in the content div only applies to its direct children. 3:06 So other deeply nested elements like side A and side B, 3:14 do not live in the same 3D space so they behave like flat 2D elements. 3:19 In order for the nested elements to behave like elements in 3D space, 3:24 we need to pass the 3D space down to them. 3:29 And we can do that with the transform style property. 3:32 You see nested elements are rendered in 3D space 3:37 relative to their 3D transformed parent. 3:40 So I'm going to add the transform style property to the photo div 3:45 since photo is the parent of side A and side B. 3:49 So back in my style sheet, inside the photo rule, 3:54 I'm going to add the transform style property. 3:58 So now I can control whether or not the children of photo preserve 3D positioning 4:05 now the default value for transform style is flat. 4:11 With the value flat, third element of photo will appear flat and 4:20 2 dimensional, because the 3D space does not get passed down to them. 4:24 Now the value preserved 3D indicates that 4:29 the children of the element should be positioned in 3D space. 4:33 So if I go back to the photo rule and change the value from flat 4:38 to preserve 3D, 4:42 the child elements now preserve the 3D space defined in the content div. 4:47 So now any child of photo can be a 3D transformed element. 4:52 In other words, side A and side B now live inside the same 3D space as their parent. 4:57 Check out this animated example created by WebKit 5:04 that demonstrates how the transform style property works. 5:07 So the main box with the blue outline has perspective set on it, and 5:11 the purple box inside has transform style preserved 3D applied to it, 5:16 which allows the yellow and 5:21 green boxes nested inside to live in a shared 3D space and appear in 3D. 5:23 Now when you hover over the purple box, 5:30 transform style changes to its default value, black. 5:32 So the nested yellow and green boxes sort of collapse back into the purple box and 5:36 appear flat. 5:41 Comparing this to our image gallery, you can say that the blue box is our 5:43 content div, the purple box is the photo div, and 5:47 the green and yellow boxes are the side A and side B divs. 5:51 Back in our photo gallery we don't see any changes in the browser just yet, 5:56 we're still seeing the reverse side of side A when we flip the photo div. 6:01 So by default the back side of an element is visible when facing the viewer. 6:07 But, when elements are in 3D space, we can use the back face 6:13 visibility property to control whether or not we can see an element's back side. 6:17 Since side A and side B are now 3D positioned elements and 6:24 can accept other 3D transform properties. 6:29 We can select these two divs and apply the back face visibility property, 6:32 then use the value hidden to hide their backsides. 6:37 So this completely hides the backsides of side A and 6:41 side B, and since the backside of side B is hidden. 6:46 The photos sort of disappear when they rotate 180 degrees. 6:50 Now if I go back and remove side B from this rule, you can see what it 6:54 looks like if you apply back face visibility hidden to side A only. 6:58 So now we're able to see the backside of side B and 7:04 because it's the back side all of the texts appears backwards. 7:07 So we need to display its front side so all the text reads normal. 7:11 So I'll go ahead and add side B back to this rule. 7:19 And now to display the front side of the side B div, 7:23 I can rotate side B on the y axis. 7:27 By 180 degrees. 7:31 So right below this rule, I will target the side B div. 7:33 And I'll add the transform property and 7:36 I'm going to use the rotate y function and set the value to 180 degrees. 7:42 So now when the photo div flips over 180 degrees, 7:51 we can see the front side of the side B DIV and the text reads normal. 7:55 So great now we're all set. 7:59 To quickly summarize what we just did, we passed the 3D perspective 8:05 down to the photo div with transform style preserve 3D so 8:10 that the two sides can accept 3D properties like back face visibility. 8:15 Then, we hid the backsides of side A and side B with back face visibility hidden. 8:21 And, we rotated side-b. 8:28 180 degrees to it's front side, so 8:30 that we're able to see it and read it's contents once the photo div flips over. 8:33 Now we can make this rotation a whole lot more animated and 8:41 exciting using a cubic-bezier function like we learned in the previous stage. 8:44 So, back in my style sheet, I'll scroll up to the photo rule and 8:50 I'm going to replace the ease out timing function with 8:55 the cubic-bezier function and then I'll add the four values. 8:58 So, I'll make the first one .55. 9:04 The second one will be -.62, 9:06 the third value will be .27 and the the fourth value will be 1.2. 9:10 All right, so let's take a look. 9:15 Once we refresh the page and hover over a photo div, 9:19 we can see that the rotation now has a fun, realistic bounce to it. 9:24 Nice. 9:28 Now, if you wanna change the flipping effect, so 9:29 that the photos flip towards us, either forwards or backwards, 9:32 you can simply change the two rotate Y functions to rotate X. 9:36 So, in the photo hover rule, I'm going to replace rotate Y with rotate X. 9:43 And I'll do the same thing in the side B rule. 9:48 Nice. 9:55 I like this effect a little better so I'll stick with this when moving forward. 9:56 But you can set the functions back to rotate X if you prefer that effect. 10:00