1
00:00:00,270 --> 00:00:03,970
In this lesson, we're gonna have
a little fun using CSS transitions and

2
00:00:03,970 --> 00:00:07,690
3D transforms to make the image
gallery interactions look 3D.

3
00:00:07,690 --> 00:00:12,710
We're gonna add a 3D flipping
animation to the photo gallery.

4
00:00:12,710 --> 00:00:17,170
We'll create a transition that flips
the images over to show their title,

5
00:00:17,170 --> 00:00:20,590
description and
download button on the backside.

6
00:00:20,590 --> 00:00:23,670
This will all be done with
the rotate function and

7
00:00:23,670 --> 00:00:27,440
you're also gonna learn a new
property that gives you more control

8
00:00:27,440 --> 00:00:30,890
over the behaviour of nested
elements in 3D space.

9
00:00:30,890 --> 00:00:32,980
So, let's get started.

10
00:00:32,980 --> 00:00:35,850
Back in my workspace the first
thing I want to do is animate

11
00:00:35,850 --> 00:00:38,260
the photo rotations on hover.

12
00:00:38,260 --> 00:00:42,320
So I'm going to give
the photo div a transition.

13
00:00:42,320 --> 00:00:46,470
So inside the photo rule,
I'll add the transition property,

14
00:00:46,470 --> 00:00:51,460
then I'll set transform as
the transition property value.

15
00:00:51,460 --> 00:00:57,500
I'll give it a 1 second duration and
a timing function of ease-out.

16
00:00:57,500 --> 00:01:02,450
Next, I'll remove the transform
we applied in the previous video.

17
00:01:02,450 --> 00:01:07,800
So I'll select and delete the transform
declaration from the photo rule, and

18
00:01:07,800 --> 00:01:14,330
now I'll target photo on hover and
add the transform in this rule.

19
00:01:18,830 --> 00:01:21,760
If you've checked out the HTML for
this section, you might have noticed

20
00:01:21,760 --> 00:01:26,540
the new class names added to the image and
div nested inside photo.

21
00:01:26,540 --> 00:01:32,000
So the image has a class of side A and
the div containing the images

22
00:01:32,000 --> 00:01:36,767
titled description and
button has a new class of side B.

23
00:01:39,470 --> 00:01:45,644
That side B div is positioned directly
behind side A using absolute positioning,

24
00:01:45,644 --> 00:01:50,831
so we don't see it yet, but
I'll quickly go over to my style sheet and

25
00:01:50,831 --> 00:01:54,320
change side Bs z-index so you can see it.

26
00:01:54,320 --> 00:01:56,380
So I'll bring it up on the z-index.

27
00:01:56,380 --> 00:01:59,323
With a z and x value of 100.

28
00:02:02,114 --> 00:02:06,331
So, as you can see, the div has
a blue background with a title,

29
00:02:06,331 --> 00:02:11,119
description, and button,
just as you have seen in previous lessons.

30
00:02:18,644 --> 00:02:19,260
Okay.

31
00:02:19,260 --> 00:02:24,690
So now, I'm going to give the photo
div a rotation on the Y axis.

32
00:02:24,690 --> 00:02:30,439
So, back in my photo hover rule,
inside the transform value,

33
00:02:30,439 --> 00:02:36,200
I will add the rotate Y function and
set it to -180 degrees.

34
00:02:37,390 --> 00:02:44,140
So the value -180 degrees rotates
the photo div from right to left.

35
00:02:44,140 --> 00:02:46,400
When it flips over 180 degrees,

36
00:02:46,400 --> 00:02:49,870
we are able to see the reverse
side of the images.

37
00:02:49,870 --> 00:02:54,710
But what about the blue side B
div position behind the images?

38
00:02:54,710 --> 00:02:57,470
Why aren't we seeing those
when the photo div flip over?

39
00:02:58,950 --> 00:03:03,410
This has to do with the way
nested elements, like side A and

40
00:03:03,410 --> 00:03:06,790
side B divs, behave in 3D space.

41
00:03:06,790 --> 00:03:14,400
The 3D space we defined in the content
div only applies to its direct children.

42
00:03:14,400 --> 00:03:19,110
So other deeply nested elements
like side A and side B,

43
00:03:19,110 --> 00:03:24,980
do not live in the same 3D space so
they behave like flat 2D elements.

44
00:03:24,980 --> 00:03:29,100
In order for the nested elements to
behave like elements in 3D space,

45
00:03:29,100 --> 00:03:32,660
we need to pass the 3D space down to them.

46
00:03:32,660 --> 00:03:37,210
And we can do that with
the transform style property.

47
00:03:37,210 --> 00:03:39,710
You see nested elements
are rendered in 3D space

48
00:03:40,800 --> 00:03:43,690
relative to their 3D transformed parent.

49
00:03:45,350 --> 00:03:49,330
So I'm going to add the transform
style property to the photo div

50
00:03:49,330 --> 00:03:52,950
since photo is the parent of side A and
side B.

51
00:03:54,980 --> 00:03:58,670
So back in my style sheet,
inside the photo rule,

52
00:03:58,670 --> 00:04:02,950
I'm going to add
the transform style property.

53
00:04:05,430 --> 00:04:11,480
So now I can control whether or not the
children of photo preserve 3D positioning

54
00:04:11,480 --> 00:04:16,430
now the default value for
transform style is flat.

55
00:04:20,220 --> 00:04:24,605
With the value flat, third element
of photo will appear flat and

56
00:04:24,605 --> 00:04:29,480
2 dimensional, because the 3D space
does not get passed down to them.

57
00:04:29,480 --> 00:04:33,470
Now the value preserved 3D indicates that

58
00:04:33,470 --> 00:04:38,460
the children of the element
should be positioned in 3D space.

59
00:04:38,460 --> 00:04:42,738
So if I go back to the photo rule and
change the value from flat

60
00:04:42,738 --> 00:04:47,670
to preserve 3D,

61
00:04:47,670 --> 00:04:52,730
the child elements now preserve the 3D
space defined in the content div.

62
00:04:52,730 --> 00:04:57,390
So now any child of photo can
be a 3D transformed element.

63
00:04:57,390 --> 00:05:03,810
In other words, side A and side B now live
inside the same 3D space as their parent.

64
00:05:04,900 --> 00:05:07,860
Check out this animated
example created by WebKit

65
00:05:07,860 --> 00:05:11,160
that demonstrates how
the transform style property works.

66
00:05:11,160 --> 00:05:16,170
So the main box with the blue outline
has perspective set on it, and

67
00:05:16,170 --> 00:05:21,860
the purple box inside has transform
style preserved 3D applied to it,

68
00:05:21,860 --> 00:05:23,850
which allows the yellow and

69
00:05:23,850 --> 00:05:30,740
green boxes nested inside to live in
a shared 3D space and appear in 3D.

70
00:05:30,740 --> 00:05:32,950
Now when you hover over the purple box,

71
00:05:32,950 --> 00:05:36,890
transform style changes to
its default value, black.

72
00:05:36,890 --> 00:05:41,720
So the nested yellow and green boxes sort
of collapse back into the purple box and

73
00:05:41,720 --> 00:05:43,290
appear flat.

74
00:05:43,290 --> 00:05:47,480
Comparing this to our image gallery,
you can say that the blue box is our

75
00:05:47,480 --> 00:05:51,320
content div,
the purple box is the photo div, and

76
00:05:51,320 --> 00:05:55,170
the green and yellow boxes
are the side A and side B divs.

77
00:05:56,200 --> 00:06:01,350
Back in our photo gallery we don't see
any changes in the browser just yet,

78
00:06:01,350 --> 00:06:07,460
we're still seeing the reverse side
of side A when we flip the photo div.

79
00:06:07,460 --> 00:06:13,670
So by default the back side of an element
is visible when facing the viewer.

80
00:06:13,670 --> 00:06:17,930
But, when elements are in 3D space,
we can use the back face

81
00:06:17,930 --> 00:06:22,810
visibility property to control whether or
not we can see an element's back side.

82
00:06:24,020 --> 00:06:29,950
Since side A and
side B are now 3D positioned elements and

83
00:06:29,950 --> 00:06:32,940
can accept other 3D transform properties.

84
00:06:32,940 --> 00:06:37,990
We can select these two divs and
apply the back face visibility property,

85
00:06:37,990 --> 00:06:41,740
then use the value hidden
to hide their backsides.

86
00:06:41,740 --> 00:06:46,060
So this completely hides
the backsides of side A and

87
00:06:46,060 --> 00:06:50,260
side B, and
since the backside of side B is hidden.

88
00:06:50,260 --> 00:06:54,100
The photos sort of disappear
when they rotate 180 degrees.

89
00:06:54,100 --> 00:06:58,960
Now if I go back and remove side B
from this rule, you can see what it

90
00:06:58,960 --> 00:07:04,550
looks like if you apply back face
visibility hidden to side A only.

91
00:07:04,550 --> 00:07:07,770
So now we're able to see
the backside of side B and

92
00:07:07,770 --> 00:07:11,220
because it's the back side all
of the texts appears backwards.

93
00:07:11,220 --> 00:07:15,314
So we need to display its front side so
all the text reads normal.

94
00:07:19,183 --> 00:07:23,420
So I'll go ahead and
add side B back to this rule.

95
00:07:23,420 --> 00:07:27,950
And now to display the front
side of the side B div,

96
00:07:27,950 --> 00:07:31,760
I can rotate side B on the y axis.

97
00:07:31,760 --> 00:07:33,330
By 180 degrees.

98
00:07:33,330 --> 00:07:36,870
So right below this rule,
I will target the side B div.

99
00:07:36,870 --> 00:07:42,300
And I'll add the transform property and

100
00:07:42,300 --> 00:07:48,700
I'm going to use the rotate y function and
set the value to 180 degrees.

101
00:07:51,370 --> 00:07:55,420
So now when the photo div
flips over 180 degrees,

102
00:07:55,420 --> 00:07:59,910
we can see the front side of the side
B DIV and the text reads normal.

103
00:07:59,910 --> 00:08:01,560
So great now we're all set.

104
00:08:05,626 --> 00:08:10,988
To quickly summarize what we just did,
we passed the 3D perspective

105
00:08:10,988 --> 00:08:15,425
down to the photo div with
transform style preserve 3D so

106
00:08:15,425 --> 00:08:21,090
that the two sides can accept 3D
properties like back face visibility.

107
00:08:21,090 --> 00:08:28,040
Then, we hid the backsides of side A and
side B with back face visibility hidden.

108
00:08:28,040 --> 00:08:30,290
And, we rotated side-b.

109
00:08:30,290 --> 00:08:33,730
180 degrees to it's front side, so

110
00:08:33,730 --> 00:08:38,881
that we're able to see it and read it's
contents once the photo div flips over.

111
00:08:41,310 --> 00:08:44,610
Now we can make this rotation
a whole lot more animated and

112
00:08:44,610 --> 00:08:49,050
exciting using a cubic-bezier function
like we learned in the previous stage.

113
00:08:50,600 --> 00:08:55,030
So, back in my style sheet,
I'll scroll up to the photo rule and

114
00:08:55,030 --> 00:08:58,724
I'm going to replace the ease
out timing function with

115
00:08:58,724 --> 00:09:04,100
the cubic-bezier function and
then I'll add the four values.

116
00:09:04,100 --> 00:09:06,980
So, I'll make the first one .55.

117
00:09:06,980 --> 00:09:10,415
The second one will be -.62,

118
00:09:10,415 --> 00:09:15,450
the third value will be .27 and
the the fourth value will be 1.2.

119
00:09:15,450 --> 00:09:19,580
All right, so let's take a look.

120
00:09:19,580 --> 00:09:24,230
Once we refresh the page and
hover over a photo div,

121
00:09:24,230 --> 00:09:27,750
we can see that the rotation now
has a fun, realistic bounce to it.

122
00:09:28,810 --> 00:09:29,880
Nice.

123
00:09:29,880 --> 00:09:32,350
Now, if you wanna change
the flipping effect, so

124
00:09:32,350 --> 00:09:36,670
that the photos flip towards us,
either forwards or backwards,

125
00:09:36,670 --> 00:09:41,554
you can simply change the two
rotate Y functions to rotate X.

126
00:09:43,180 --> 00:09:47,720
So, in the photo hover rule, I'm going
to replace rotate Y with rotate X.

127
00:09:48,770 --> 00:09:52,827
And I'll do the same
thing in the side B rule.

128
00:09:55,954 --> 00:09:56,880
Nice.

129
00:09:56,880 --> 00:10:00,990
I like this effect a little better so
I'll stick with this when moving forward.

130
00:10:00,990 --> 00:10:05,136
But you can set the functions back to
rotate X if you prefer that effect.