WEBVTT FILE





1
00:00:06.560 --> 00:00:12.389
in this video we're gonna learn how to make 3d transforms okay

2
00:00:12.389 --> 00:00:19.650
so first let's get rid of the 2d properties we did in the previous video

3
00:00:19.650 --> 00:00:32.660
and now let's start with our first 3d transform which is gonna be to rotate

4
00:00:32.660 --> 00:00:39.540
the Facebook div in 3d so which means that if you imagine that the rectangle

5
00:00:39.540 --> 00:00:45.450
is sitting in a 3d environment now we're gonna start we're gonna try to pull the

6
00:00:45.450 --> 00:00:51.420
top of Facebook towards us and we're gonna try to push the bottom of Facebook

7
00:00:51.420 --> 00:00:56.730
then that does will create a 3d effects and Facebook is going to be rotating

8
00:00:56.730 --> 00:01:03.000
like this okay so if you pull the at the top and you push the bottom then you're

9
00:01:03.000 --> 00:01:13.320
gonna create a 3d rotation okay and that's an X rotation okay well if you if

10
00:01:13.320 --> 00:01:20.340
you push the right side and you pull the rights the left side towards you then

11
00:01:20.340 --> 00:01:27.140
you're creating a Y rotation because you are rotating the div around the y axis

12
00:01:27.140 --> 00:01:36.150
while the X rotation is rotation rotating around the x-axis okay so the

13
00:01:36.150 --> 00:01:41.759
syntax is similar to to this which starts all the time with transform okay

14
00:01:41.759 --> 00:01:47.340
and then we're gonna go to rotate but this time we're going to be doing

15
00:01:47.340 --> 00:01:53.939
rotates X and then we set the angle so let's try 10 degrees and see what

16
00:01:53.939 --> 00:02:05.940
happens okay so we're not seeing a big difference now we start seeing the

17
00:02:05.940 --> 00:02:12.390
difference so just imagine that you are you are pulling the top and pushing the

18
00:02:12.390 --> 00:02:21.420
the bottom so if we continue once you go to 90 degrees then you don't see

19
00:02:21.420 --> 00:02:27.750
anything okay because once we rotates the Dave around the x axis by 90 degrees

20
00:02:27.750 --> 00:02:34.680
then if the div is supposed to be a flats a rectangle and we are turning in

21
00:02:34.680 --> 00:02:39.960
the indeed in a 3d environment then once you turn into 3d then you can't see

22
00:02:39.960 --> 00:02:44.640
anything because it's just sitting there flats and you can't you can't see

23
00:02:44.640 --> 00:02:53.090
anything that all right so let's keep it 30 degrees for instance okay and let's

24
00:02:53.090 --> 00:03:05.459
try now to do a a Y rotation okay I'm just going to duplicate that and change

25
00:03:05.459 --> 00:03:20.700
the X to Y and now we can see that the bigger the angle because the bigger the

26
00:03:20.700 --> 00:03:28.200
effect the effect is and you can see how this change happens so it's like we are

27
00:03:28.200 --> 00:03:32.100
pulling that side and we are pulling we are pushing that side okay

28
00:03:32.100 --> 00:03:42.690
so that's how the rotation works in 3d bear in mind that the syntax will change

29
00:03:42.690 --> 00:03:49.680
for other browsers so this is the sunlit syntax and as we have seen for the 2d we

30
00:03:49.680 --> 00:03:53.880
will need to add some something in front of transform so for instance for

31
00:03:53.880 --> 00:04:03.800
Internet Explorer 9 will use this syntax so minus sign M s minus sign for other

32
00:04:03.800 --> 00:04:11.150
browsers we will need to use the minus sign followed by WebKit's

33
00:04:12.330 --> 00:04:19.799
okay for now let's just comment those okay so that's how the 3d transform

34
00:04:26.220 --> 00:04:33.270
works in the next video we're going to be looking at transitions