1
00:00:00,510 --> 00:00:05,940
I guess next up, we're going to learn about transitions plus transformations and what I'm what I mean

2
00:00:05,940 --> 00:00:08,280
by transformations, actually a couple of things.

3
00:00:08,280 --> 00:00:09,380
We can transform McWane.

4
00:00:09,830 --> 00:00:11,340
You can see you can rotate.

5
00:00:11,340 --> 00:00:12,630
We can translate.

6
00:00:13,200 --> 00:00:15,500
And we can also scale in excess.

7
00:00:15,510 --> 00:00:17,010
So let's take a look at this.

8
00:00:17,590 --> 00:00:19,440
Let's go back to our success.

9
00:00:21,500 --> 00:00:29,810
And let's start by targeting AA2 with a class of transformation, they don't need the transformation.

10
00:00:30,050 --> 00:00:33,350
I believe I did transformation, Dario.

11
00:00:35,690 --> 00:00:39,080
Let's go back into access and target that class.

12
00:00:41,520 --> 00:00:46,800
Now, again, I'm going to specify swith and its height with 100 pixels.

13
00:00:51,360 --> 00:00:56,840
And I'm going to give you the background color of well and talk back on call this time.

14
00:00:58,050 --> 00:01:02,850
So let's first of all, transition with what?

15
00:01:06,390 --> 00:01:10,860
Two seconds and height, also two seconds.

16
00:01:11,340 --> 00:01:12,420
Wanted to be equal.

17
00:01:20,210 --> 00:01:22,310
And also the transformation.

18
00:01:24,970 --> 00:01:28,000
So Transform will also take two seconds.

19
00:01:29,290 --> 00:01:34,630
Now, let's go it in here and let me actually target or div with a.

20
00:01:36,640 --> 00:01:38,200
So when we hover over it.

21
00:01:42,470 --> 00:01:44,990
Let's, first of all, transform our way tonight.

22
00:01:45,230 --> 00:01:50,210
So let's go with start with with 300 pixels.

23
00:01:51,980 --> 00:02:03,470
And the height of 300 pixels, and as soon as we do this, we take a look here, not here and not one.

24
00:02:06,760 --> 00:02:11,570
Well, we have our normal transformation with 300 and 300 pixels.

25
00:02:12,070 --> 00:02:17,350
Now let's do a rotation and for the rotation, we're going to see transform.

26
00:02:19,370 --> 00:02:28,910
And it should transform by rotating now we can rotate on specific axis Y, X and Z A Fredi rotation,

27
00:02:29,190 --> 00:02:33,650
we go with a normal rotation and let's say one hundred eighty degrees.

28
00:02:34,050 --> 00:02:38,140
We have the specified degrees so the units for rotating something is degrees.

29
00:02:38,140 --> 00:02:39,290
So let's take a look at this.

30
00:02:42,580 --> 00:02:43,750
And D'Arrigo.

31
00:02:46,390 --> 00:02:53,500
Now, we could also do terms so we can't this and instead of one hundred eighty degrees, we're going

32
00:02:53,500 --> 00:02:59,260
to take 180 and go into tiepin turn.

33
00:03:01,970 --> 00:03:05,550
OK, and what this will do, it may show you this.

34
00:03:05,860 --> 00:03:12,590
OK, now, OK, it's safe and at the and I'll go back.

35
00:03:13,030 --> 00:03:18,130
So that's how it is a bit of the difference because it's trying to make.

36
00:03:19,320 --> 00:03:23,400
One turn and also scaling up to 300 pixels.

37
00:03:24,090 --> 00:03:30,510
Now, if I do multiple turns, make sure this actually is go to five.

38
00:03:30,870 --> 00:03:34,860
This will increase the speed if I hover over it.

39
00:03:37,080 --> 00:03:44,880
OK, so these are complete turns till it reaches it's actually in those two seconds that it will turn

40
00:03:44,880 --> 00:03:50,380
five times within two seconds within change to the transformation.

41
00:03:50,440 --> 00:03:52,470
OK, definition speed.

42
00:03:53,480 --> 00:03:56,430
It's the same, so it won't take any longer.

43
00:03:56,660 --> 00:04:00,990
So within the same amount of time, it needs to turn five times.

44
00:04:01,040 --> 00:04:04,130
That is why the speed is so immense.

45
00:04:04,580 --> 00:04:09,800
If I would change this back to one and also forget to save.

46
00:04:12,330 --> 00:04:13,490
How Mazlo?

47
00:04:14,220 --> 00:04:19,590
Now, next up, we're going to a scale so we can scale, first of all, down.

48
00:04:21,150 --> 00:04:28,650
Transform and scale, and we'll scale it down by twenty one point zero point one.

49
00:04:30,030 --> 00:04:34,160
This just means I'm going to scale it to 10 percent of its initial size.

50
00:04:34,560 --> 00:04:36,240
So as soon as this hover over it.

51
00:04:38,330 --> 00:04:41,030
There we go to scale down to 10 percent.

52
00:04:43,180 --> 00:04:47,890
Now, we can also scale it up to combat this and.

53
00:04:50,370 --> 00:05:01,210
Let's go with one point, too, which is actually 120 percent a key, so let's go here a word then whoa,

54
00:05:01,950 --> 00:05:07,500
because it scales to 20 percent from its initial 100 percent at 100 percent.

55
00:05:07,500 --> 00:05:12,790
It should be three hundred three hundred pixels and we add an extra 20 percent to it.

56
00:05:13,470 --> 00:05:17,100
I came the last one I want to show you is a translation.

57
00:05:18,250 --> 00:05:26,960
The translation I actually translated with it translate in sense of in a specific direction, so let's

58
00:05:26,960 --> 00:05:36,200
type in transform, then translate and we will first of all translate on an x axis, let's say 120 pixels.

59
00:05:40,320 --> 00:05:48,300
So it grows, but also in the same time goes to the right on x axis, like also push it down by targeting

60
00:05:48,300 --> 00:05:53,370
the Perdis and but I need to comment this one out the show why?

61
00:05:54,030 --> 00:05:58,290
And capital y this is not translate on the Y axis.

62
00:06:00,180 --> 00:06:08,880
OK, and if I leave them both in, then it will translate on both axes, actually overrides the other

63
00:06:08,880 --> 00:06:09,090
one.

64
00:06:09,540 --> 00:06:14,670
So what we need to do is take out the translate direction from.

65
00:06:16,770 --> 00:06:17,610
The first one.

66
00:06:18,590 --> 00:06:24,290
So we only have translate and now if I leave only one word value within it, then it will translate

67
00:06:24,290 --> 00:06:27,290
on both axes with the 120 pixels, so.

68
00:06:31,390 --> 00:06:35,800
It actually doesn't work anymore that way, so we need to put in two values.

69
00:06:37,010 --> 00:06:42,590
OK, and this just translates for both X and Y axis, one hundred twenty pixels.

70
00:06:43,340 --> 00:06:44,500
We could also do percentage.

71
00:06:44,510 --> 00:06:47,750
I could do I say 50 percent.

72
00:06:51,200 --> 00:06:52,580
And this should also work.

73
00:06:56,280 --> 00:07:04,680
It's from its initial position, it will go plus 50 percent to which action on the wider action so downwards.

74
00:07:07,000 --> 00:07:14,830
OK, guys, so that's pretty much it for translation and trends formations, so in the next one.