WEBVTT FILE





1
00:00:05.779 --> 00:00:13.170
in this video we're going to learn how to create 2d transforms basically this

2
00:00:13.170 --> 00:00:18.449
means that we're going to be changing the shape of some elements also we can

3
00:00:18.449 --> 00:00:26.970
change their size and positioning so starting with the facebook dave we can

4
00:00:26.970 --> 00:00:32.520
well first of all let's change the widths of facebook 200 pixels so that we

5
00:00:32.520 --> 00:00:39.930
can see how changes work and now let's start with our first transform which is

6
00:00:39.930 --> 00:00:47.940
going to be the rotation so the syntax there is a certain syntax we need to

7
00:00:47.940 --> 00:00:54.149
start with transform and then after that we choose what change we want to apply

8
00:00:54.149 --> 00:00:59.010
for the element okay so in our case we want to rotate so you're gonna go for

9
00:00:59.010 --> 00:01:09.240
the rotate function okay and we need to specify the angle of rotation and we can

10
00:01:09.240 --> 00:01:18.900
see if we go for 30 degrees the div is rotating by 30 degrees clockwise okay so

11
00:01:18.900 --> 00:01:26.759
some other browsers they will need a different syntax so for instance in

12
00:01:26.759 --> 00:01:34.700
Internet Explorer 9 would need a minus sign ms minus sign in front of transform

13
00:01:34.700 --> 00:01:40.490
other browsers they will need minus sign WebKit's

14
00:01:40.490 --> 00:01:48.060
minus sign in front of transform okay so just bear that in mind for cross

15
00:01:48.060 --> 00:01:59.780
browser compatibility but for now let's just focus on our standard syntax

16
00:02:00.840 --> 00:02:10.620
so let's try something else now let's try to translate the div so we gonna go

17
00:02:10.620 --> 00:02:21.670
transform translates and now we need to specify a value there or two values so

18
00:02:21.670 --> 00:02:26.700
let's try 10 pixels for instance so you can see now that Facebook has translated

19
00:02:26.700 --> 00:02:34.420
towards the rights by 10 pixels okay if you choose 20 pixels you can see it

20
00:02:34.420 --> 00:02:41.079
better but if you choose minus 20 pixels so you can see that now the Deaf is

21
00:02:41.079 --> 00:02:51.299
going towards the left okay if we choose two values so 20 pixels and 30 pixels

22
00:02:51.299 --> 00:02:59.200
the second value is gonna tell the browser to move the div down if it's a

23
00:02:59.200 --> 00:03:04.030
positive value if it's a negative value then we're moving up okay so that's how

24
00:03:04.030 --> 00:03:10.450
the translation works now let's try something else

25
00:03:10.450 --> 00:03:25.090
let's try scaling so transform scale okay basically we're gonna need so let's

26
00:03:25.090 --> 00:03:34.599
try if we use one value that means so if we choose points five that means that we

27
00:03:34.599 --> 00:03:43.540
are helping both the width and height of Facebook okay if we want to chain to

28
00:03:43.540 --> 00:03:48.700
choose two values one for the width and one for the heights then we can do that

29
00:03:48.700 --> 00:03:55.530
as well so for instance we can set if we go one and one that means that we are

30
00:03:55.530 --> 00:04:01.150
using the original dimensions that we had before she's had pixels and Hambrick

31
00:04:01.150 --> 00:04:10.870
cells if we go for two and two then we are scaling up basically so we are

32
00:04:10.870 --> 00:04:15.030
doubling the width and with up in the heights but if we go for like

33
00:04:15.030 --> 00:04:24.639
health and one so we're having the width and we keep in the heights similar to

34
00:04:24.639 --> 00:04:30.690
its original value okay so that's how the scaling wicks

35
00:04:30.690 --> 00:04:43.479
okay let's go for another one let's try the screwing so transform school okay so

36
00:04:43.479 --> 00:04:53.020
if we choose school X for instance okay and choose a values we need an angle so

37
00:04:53.020 --> 00:04:59.650
let's go for twenty to ten degrees for instance so that means that we are just

38
00:04:59.650 --> 00:05:06.610
imagine as you're pulling the rectangle from that side towards the left and from

39
00:05:06.610 --> 00:05:12.850
that side towards the right and then you're creating this angle between the

40
00:05:12.850 --> 00:05:18.460
vertical line and this line which is similar to this angle between the

41
00:05:18.460 --> 00:05:23.169
vertical line there and that line that so the angle the ten degrees are here

42
00:05:23.169 --> 00:05:36.820
okay so that's the is going from the x axis if we try the y axis then actually

43
00:05:36.820 --> 00:05:40.720
it's different so it's like reporting from that side and from that side Ashley

44
00:05:40.720 --> 00:05:45.880
so growing up and down here and the angle is what you see between the

45
00:05:45.880 --> 00:05:52.990
horizontal line and the line does it send agrees okay so we can try Scoob

46
00:05:52.990 --> 00:06:00.190
just like that and if you choose only one value it's similar to the x2 this QX

47
00:06:00.190 --> 00:06:10.500
if you choose two values then that's for the X and that's for the Y okay