Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Resources
- Using CSS 3D transforms
- transform-style – MDN
- transform-style – WebKit demo
- backface-visibility – MDN
- cubic-bezier – WPD
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-visibilityto control whether or not you see an element's backside. -
backface-visibility: hidden;hides the backside of a 3D-transformed element.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up