Preview

Start a free Courses trial
to watch this video

Create a Flipping Animation with 3D Transform Properties

Name: Create a Flipping Animation with 3D Transform Properties
Uploaded: 2016-03-16T13:12:58Z
Duration: 609 s
Description: Let's use CSS transitions and 3D transforms to make the photo gallery look 3D! In this video, you're going to create a 3D flip animation. You'll also learn a new property that gives you control over the behavior of nested elements in 3D space.

10:09 with Guil Hernandez

Let's use CSS transitions and 3D transforms to make the photo gallery look 3D! In this video, you're going to create a 3D flip animation. You'll also learn a new property that gives you control over the behavior of nested elements in 3D space.

Teacher's Notes
Video Transcript
Downloads

Resources

Video review

The 3D space you set applies to the direct children only.
Other deeply nested elements will not live in the same 3D space, so they'll behave like 2D elements.
For nested elements to behave like elements in 3D space, pass the 3D space down to them, using transform-style.
transform-style: preserve-3d; indicates that the children of the element should be positioned in the 3D space.
By default, the backside of an element is visible when facing the viewer.
When elements are in 3D space, you can use backface-visibility to control whether or not you see an element's backside.
backface-visibility: hidden; hides the backside of a 3D-transformed element.

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

You need to sign up for Treehouse in order to download course files.

CSS Transitions and Transforms

Create a Flipping Animation with 3D Transform Properties

Resources

Video review