1
00:00:00,000 --> 00:00:05,103
[MUSIC]

2
00:00:05,103 --> 00:00:09,113
When you watch a movie in 3D
the elements on screen appear to jump

3
00:00:09,113 --> 00:00:13,657
out towards you or move away from you,
as if they were there in real life.

4
00:00:13,657 --> 00:00:18,094
This effect is created by enhancing
the illusion of depth perception.

5
00:00:18,094 --> 00:00:22,919
The effect adds a third dimension to
the otherwise flat two-dimensional

6
00:00:22,919 --> 00:00:23,950
movie screen.

7
00:00:23,950 --> 00:00:27,800
Computer, tablet, and mobile screens
are also flat and two dimensional.

8
00:00:27,800 --> 00:00:32,200
But with CSS 3d transforms you can
add depth to elements on the page and

9
00:00:32,200 --> 00:00:36,780
create movement towards and
away from the viewer like in a 3D movie.

10
00:00:36,780 --> 00:00:41,150
The transforms you learned in
the previous section rotate, scale,

11
00:00:41,150 --> 00:00:45,400
skew, and translate elements
in two dimensional space.

12
00:00:45,400 --> 00:00:50,200
That is, horizontally and
vertically on the x and y axis.

13
00:00:50,200 --> 00:00:54,080
3D transforms are an extension
of 2D transforms.

14
00:00:54,080 --> 00:00:58,390
They let you simulate 3D space
on a screen by introducing

15
00:00:58,390 --> 00:01:01,730
a 3rd axis called the Z axis.

16
00:01:01,730 --> 00:01:06,030
The Z axis creates the illusion of
depth on a two dimensional screen.

17
00:01:06,030 --> 00:01:10,010
On the Z axis you can move elements
towards or away from the viewer.

18
00:01:10,010 --> 00:01:13,910
Even rotate and
scale them within a 3D perspective.

19
00:01:13,910 --> 00:01:17,240
You may have already seen
3D transforms on the web.

20
00:01:17,240 --> 00:01:22,460
For example Amazon.com uses 3D transforms
in some of their product pages.

21
00:01:22,460 --> 00:01:27,310
So, on this page, when a user hovers
over the book, it partially opens.

22
00:01:27,310 --> 00:01:30,850
You can also see the back cover
of the book by flipping it,

23
00:01:30,850 --> 00:01:33,830
then you can flip it
back to the front cover.

24
00:01:33,830 --> 00:01:37,720
Here's another impressive example
of 3D transforms an action.

25
00:01:37,720 --> 00:01:40,020
A 3D book showcase.

26
00:01:40,020 --> 00:01:43,700
So at first you see a few
colorful books on a shelf.

27
00:01:43,700 --> 00:01:48,150
Then once you hover over a book
it tilts back towards you.

28
00:01:48,150 --> 00:01:50,640
This is all done within a 3D perspective.

29
00:01:50,640 --> 00:01:54,320
So if you hover over one
of the books in the middle,

30
00:01:54,320 --> 00:01:59,250
you only see the back and
top areas of the book when it tilts back.

31
00:01:59,250 --> 00:02:02,483
But the books that are further
away from the middle reveal more

32
00:02:02,483 --> 00:02:05,728
depth when they tilt back,
just like they would in real life.

33
00:02:08,544 --> 00:02:13,341
The 3D effects in these two examples
were created using many of the CSS

34
00:02:13,341 --> 00:02:17,325
transform concepts you learned
in the previous section,

35
00:02:17,325 --> 00:02:20,510
like rotation, translation, and scaling.

36
00:02:20,510 --> 00:02:23,601
Once you learn how to define
3D space on the page,

37
00:02:23,601 --> 00:02:28,387
you can create all sorts of amazing 3D
effects using transform properties,

38
00:02:28,387 --> 00:02:30,681
like this awesome 3D image slider.

39
00:02:34,605 --> 00:02:39,162
So coming up in the next video, you'll
get started using 3D transforms by first

40
00:02:39,162 --> 00:02:41,720
learning how to activate
3D space on the page