1
00:00:00,400 --> 00:00:03,570
You will need to launch the workspace
on this page to follow along using

2
00:00:03,570 --> 00:00:04,770
the latest files.

3
00:00:04,770 --> 00:00:09,090
You can also download the files and follow
along with your preferred text editor.

4
00:00:09,090 --> 00:00:12,820
So in the latest index.html file for
this section,

5
00:00:12,820 --> 00:00:18,890
you will see three photo-container divs,
and nested inside are these

6
00:00:18,890 --> 00:00:24,490
photo wrappers containing an image and
a photo description div.

7
00:00:24,490 --> 00:00:29,460
Now, when you preview the index.html file
you can see that we're using an awesome

8
00:00:29,460 --> 00:00:32,830
space theme for
this section on 3D transforms.

9
00:00:32,830 --> 00:00:38,780
Now, currently the images are positioned
on top of the photo description divs, so

10
00:00:38,780 --> 00:00:42,490
we're not able to see them yet but we'll
see what they look like in just a bit.

11
00:00:42,490 --> 00:00:49,210
So perspective is what separates
3D transforms from 2D transforms.

12
00:00:49,210 --> 00:00:52,290
So before you can
transform an element in 3D,

13
00:00:52,290 --> 00:00:56,490
you need to first establish
a 3D perspective on the page

14
00:00:56,490 --> 00:01:01,000
otherwise your transforms will still
appear flat and two dimensional.

15
00:01:01,000 --> 00:01:06,470
So to define 3D space,
you can use the perspective property.

16
00:01:06,470 --> 00:01:11,470
Now we can apply the perspective property
to the body element, a div element,

17
00:01:11,470 --> 00:01:14,190
or any other block-level element.

18
00:01:14,190 --> 00:01:19,888
So I'm going to apply perspective
to the page's content div.

19
00:01:19,888 --> 00:01:25,530
Back inside interactions.css
I'm going to target

20
00:01:27,030 --> 00:01:32,480
the class content then inside I'll
add the perspective property.

21
00:01:33,990 --> 00:01:37,980
The perspective property
creates the illusion of depth.

22
00:01:37,980 --> 00:01:42,660
It sets the distance between the viewer
and the objects we're transforming.

23
00:01:42,660 --> 00:01:47,240
In other words, how far away or
how close objects appear to us.

24
00:01:47,240 --> 00:01:52,510
That distance is determined by
the perspective value we use.

25
00:01:52,510 --> 00:01:58,310
Perspective accepts one value, and
the value can be in pixels, ems or rems.

26
00:01:58,310 --> 00:02:02,310
So I start with a value of 700 pixels.

27
00:02:02,310 --> 00:02:06,500
Now don't worry if you're not sure
what this value means just yet.

28
00:02:06,500 --> 00:02:09,980
We're gonna test a few different
perspective values later

29
00:02:09,980 --> 00:02:11,510
when we add transforms.

30
00:02:11,510 --> 00:02:16,390
Then you'll understand how this value
affects how we see elements in 3D space.

31
00:02:16,390 --> 00:02:19,400
So now we've let the content div know

32
00:02:19,400 --> 00:02:23,750
that all its children are ready
to move around in 3D space.

33
00:02:23,750 --> 00:02:27,979
With the perspective in place the stage
is set for 3D transformations.

34
00:02:29,160 --> 00:02:32,160
So, we've defined a perspective, but

35
00:02:32,160 --> 00:02:35,850
we don't see any visual changes yet
on the page.

36
00:02:35,850 --> 00:02:41,320
Well that's because the perspective
property alone doesn't create 3D objects.

37
00:02:41,320 --> 00:02:45,090
It simply enables a 3D space for
children elements.

38
00:02:45,090 --> 00:02:48,102
So now to see some cool
3D effects we need to

39
00:02:48,102 --> 00:02:52,213
apply transforms to the elements
inside the content div.

40
00:02:56,227 --> 00:03:00,653
For example, besides being able
to rotate elements clockwise or

41
00:03:00,653 --> 00:03:04,260
counterclockwise as we
do with 2D rotations.

42
00:03:04,260 --> 00:03:09,310
We can rotate elements in 3D space to make
them appear as if parts of them are moving

43
00:03:09,310 --> 00:03:11,570
towards or away from the viewer.

44
00:03:11,570 --> 00:03:13,220
So right below the content rule,

45
00:03:13,220 --> 00:03:18,780
I'm gonna target the class photo then
I'll add the transform property.

46
00:03:19,910 --> 00:03:26,960
And I'm going to use the rotate y
function and set the value to 30 degrees.

47
00:03:26,960 --> 00:03:29,420
So, once I refresh the browser,

48
00:03:29,420 --> 00:03:34,480
we're seeing the photos rotate
in 3D space on the x axis.

49
00:03:34,480 --> 00:03:37,362
So, let's try a few more values,
let's say 35.

50
00:03:40,338 --> 00:03:45,250
Let's make it larger,
something like 55, cool.

51
00:03:45,250 --> 00:03:49,284
Now, a positive value will turn
the photos left to right, and

52
00:03:49,284 --> 00:03:53,173
a negative value will turn them
in the opposite direction.

53
00:03:56,977 --> 00:04:01,730
So now, we're able to see that
illusion of depth along the z axis.

54
00:04:01,730 --> 00:04:07,590
And if I change the rotateY
value to 90 degrees,

55
00:04:07,590 --> 00:04:11,060
you can really see how
the perspective is being applied.

56
00:04:11,060 --> 00:04:14,860
The three photos are rotated
at a 90 degree angle.

57
00:04:14,860 --> 00:04:19,570
So we can barely see the side
edge of the middle image,

58
00:04:19,570 --> 00:04:23,720
if at all, because it's directly
in front of us on the Z axis and

59
00:04:23,720 --> 00:04:27,600
the two photos on the sides
reveal a lot more depth.

60
00:04:27,600 --> 00:04:31,610
Just like in the 3D bookshelf example
you saw in the previous video.

61
00:04:31,610 --> 00:04:35,610
So now let's see what rotateX
looks like in 3D space.

62
00:04:35,610 --> 00:04:40,020
So back in the photo rule
I'll change this function to

63
00:04:40,020 --> 00:04:44,435
a rotateX function and
set the value to 15 degrees.

64
00:04:47,480 --> 00:04:53,517
So a positive value flips
the photos backwards on the x axis.

65
00:04:56,109 --> 00:04:58,904
And a negative value
will flip them forwards.

66
00:05:03,257 --> 00:05:09,454
So the rotate x and rotate y functions
are 2D transforms you can use in regular

67
00:05:09,454 --> 00:05:16,680
2D space but as you can tell the results
are a lot more interesting in 3D space.

68
00:05:16,680 --> 00:05:20,160
When you enable 3D space with
the perspective property

69
00:05:20,160 --> 00:05:25,050
the smaller the value is the deeper
the perspective will be and

70
00:05:25,050 --> 00:05:28,070
the greater the value,
the shallower the perspective.

71
00:05:28,070 --> 00:05:32,800
So for example,
if I change the perspective value to

72
00:05:32,800 --> 00:05:36,248
100 pixels or even 200 pixels.

73
00:05:38,458 --> 00:05:43,165
Notice how the smaller values move
the viewer closer to the transformed

74
00:05:43,165 --> 00:05:44,940
element on the z axis.

75
00:05:44,940 --> 00:05:47,570
So the visual effects appear more intense.

76
00:05:47,570 --> 00:05:53,580
On the other hand, large values push the
viewer away further back on the z axis.

77
00:05:53,580 --> 00:05:56,299
So I'll change the value to 2000 pixels.

78
00:05:58,270 --> 00:06:01,321
And now let's say 3000 pixels.

79
00:06:03,476 --> 00:06:08,225
So as you can see, the larger values
create a shallow perspective.

80
00:06:08,225 --> 00:06:09,875
So the effect is more subtle.

81
00:06:09,875 --> 00:06:15,985
Now 700 pixels seems like a good realistic
perspective value for my photo gallery.

82
00:06:15,985 --> 00:06:17,945
So I'll stick with this
value moving forward.

83
00:06:17,945 --> 00:06:22,325
And you'll commonly see perspective
values from 500 pixels to 1500

84
00:06:22,325 --> 00:06:25,200
pixels being used in 3D transforms.

85
00:06:25,200 --> 00:06:28,024
So, you can use a higher or
lower value if you want.

86
00:06:30,578 --> 00:06:35,611
But remember if you happen to delete
the perspective property at any time, you

87
00:06:35,611 --> 00:06:40,810
will lose the 3D effect on your page and
everything will go back to looking flat.

88
00:06:42,750 --> 00:06:46,310
Coming up in the next video, we'll
start rotating the photos in 3D space.