1 00:00:00,480 --> 00:00:01,080 ‫Hey, there. 2 00:00:01,230 --> 00:00:07,580 ‫Welcome back, Siobhan, decide now in this lecture there does discuss about Transform now with that 3 00:00:07,590 --> 00:00:12,990 ‫name itself, you can see we are going to transform something that is going to be about that object 4 00:00:12,990 --> 00:00:16,620 ‫or that there or paragraph or whatever we are walking currently. 5 00:00:17,130 --> 00:00:22,560 ‫So basically, whatever the element we are trying to transform, we are going to add a property transform. 6 00:00:23,220 --> 00:00:26,250 ‫Now here I did some starting code that means I created. 7 00:00:26,250 --> 00:00:30,900 ‫I do added some text called Ask Transform and hair in styling. 8 00:00:30,900 --> 00:00:37,260 ‫I created this div added some weight as well as hi, it added some margin so we can have some space 9 00:00:37,770 --> 00:00:42,180 ‫default color, which is white, then increase my font size to 30. 10 00:00:42,390 --> 00:00:48,890 ‫I need some padding here so to maintain some space and then also added a background color to this particular 11 00:00:48,900 --> 00:00:49,140 ‫day. 12 00:00:49,800 --> 00:00:54,930 ‫So this is our starting code, and I really wanted to add this before starting this lecture. 13 00:00:55,260 --> 00:00:56,880 ‫So we don't waste time on this. 14 00:00:57,510 --> 00:00:58,170 ‫That's it. 15 00:00:58,320 --> 00:01:00,030 ‫Now, let us focus on transform. 16 00:01:00,360 --> 00:01:04,650 ‫So there are five things that we can do to transform any type of element. 17 00:01:05,100 --> 00:01:06,890 ‫The first one is to rotated. 18 00:01:07,290 --> 00:01:08,970 ‫The second one is to scale it. 19 00:01:09,450 --> 00:01:11,190 ‫The third one is to skew it. 20 00:01:11,730 --> 00:01:16,050 ‫Four to one is going to be translate and the fifth one is going to be matrix. 21 00:01:16,890 --> 00:01:19,030 ‫Now what I mean by all of them. 22 00:01:19,500 --> 00:01:21,180 ‫Let's discuss about it. 23 00:01:21,540 --> 00:01:25,590 ‫So hard to transform our element just across from property. 24 00:01:27,970 --> 00:01:30,150 ‫And this is going to have multiple options. 25 00:01:30,190 --> 00:01:35,020 ‫So let's start with rotate, our rotate basically means to rotate our element. 26 00:01:35,230 --> 00:01:39,790 ‫And we can pass values in the form of degree, let's say, 45 degrees. 27 00:01:40,030 --> 00:01:44,470 ‫And if I save this one, you can see our element is rotating. 28 00:01:46,560 --> 00:01:48,480 ‫Maybe let me take 55 degrees. 29 00:01:48,630 --> 00:01:54,780 ‫You can see it's rotated, so that means we're transformed, we can control a lot of thing without element. 30 00:01:55,170 --> 00:01:56,490 ‫Maybe commanders rotate. 31 00:01:56,610 --> 00:02:01,050 ‫Let me try to increase that size so I can utilize, transform and head. 32 00:02:01,050 --> 00:02:03,580 ‫I can pass a value in the form of skill. 33 00:02:04,290 --> 00:02:07,530 ‫And if I pass one point five and save this one. 34 00:02:08,640 --> 00:02:15,570 ‫You can see our default size was 200 by 200, not scale by multiples of 1.5. 35 00:02:15,930 --> 00:02:17,880 ‫So it should be 300 by 300. 36 00:02:18,330 --> 00:02:21,360 ‫Maybe if I want two degrees, I can go 0.5. 37 00:02:21,570 --> 00:02:25,020 ‫You can see and I can also maybe 2.5. 38 00:02:25,920 --> 00:02:27,840 ‫So that's how this is going to work. 39 00:02:28,440 --> 00:02:31,620 ‫Let me go back to one, which is the default value. 40 00:02:32,310 --> 00:02:33,060 ‫Now, had one. 41 00:02:33,060 --> 00:02:38,050 ‫Remember one thing you have passing one value that is just a single value here. 42 00:02:38,400 --> 00:02:47,640 ‫If I say 1.5, that means 1.5 multiple word as well as height, but we can control only one individual 43 00:02:47,640 --> 00:02:48,270 ‫thing itself. 44 00:02:48,600 --> 00:02:55,350 ‫So if I say scale X, that means I'm just increasing the value of Exide horizontal side. 45 00:02:55,890 --> 00:03:01,590 ‫If I say scale, why that means I'm just increasing the value of vertical side. 46 00:03:02,370 --> 00:03:05,280 ‫Now remember here I'm selecting the complete bill. 47 00:03:05,730 --> 00:03:11,190 ‫So if I try to transform anything, it will affect everything that is inside this item. 48 00:03:11,640 --> 00:03:14,550 ‫That's why you can see even the text is transformed. 49 00:03:15,360 --> 00:03:23,100 ‫So if I say scale directly, everything is transform equally on horizontal as well as what they say. 50 00:03:23,760 --> 00:03:25,860 ‫So I hope you got the idea what we are trying to do. 51 00:03:26,130 --> 00:03:30,690 ‫You can also buy store values together with a call ninety three point five here. 52 00:03:31,080 --> 00:03:39,510 ‫So I guess transform according to 3.5 and the words transform according to 1.5 so worth and then height. 53 00:03:40,660 --> 00:03:41,440 ‫OK, got it. 54 00:03:41,530 --> 00:03:44,700 ‫Let me come in this one now, the next one is about. 55 00:03:45,400 --> 00:03:49,900 ‫So just try to use, transform and have you have option about SKU? 56 00:03:50,320 --> 00:03:55,750 ‫There are again two main elements SKU in the form of x axis and then my axes. 57 00:03:56,320 --> 00:04:00,040 ‫Now, the best thing I can do is recommend the CIUSSS reference. 58 00:04:00,370 --> 00:04:01,720 ‫Jump on to transform. 59 00:04:03,230 --> 00:04:09,440 ‫So if I say SKU x 15 degrees, that means we are going to skew the element on horizontal axis. 60 00:04:09,500 --> 00:04:15,080 ‫You can see and if I say SKU y or 45 degrees, that means the vertical axis. 61 00:04:16,170 --> 00:04:18,570 ‫And you can also pass through a lot together. 62 00:04:19,190 --> 00:04:21,690 ‫Let me jump here and if I ask you. 63 00:04:24,930 --> 00:04:28,830 ‫And simply passed 30 degree here, save this one. 64 00:04:29,280 --> 00:04:31,650 ‫You can see that's how it's going to work. 65 00:04:35,560 --> 00:04:39,130 ‫Simply say SKU X and POS 45-degree. 66 00:04:40,360 --> 00:04:41,260 ‫Save this one. 67 00:04:41,410 --> 00:04:48,760 ‫You can see that's how it is going to up and go at white direction, save this one or maybe just remove 68 00:04:49,570 --> 00:04:52,840 ‫X Y and us all the bad news. 69 00:04:54,990 --> 00:04:56,730 ‫And this is our IT walking. 70 00:04:57,180 --> 00:05:00,660 ‫Now these drones forms are important to shape our element. 71 00:05:00,900 --> 00:05:06,180 ‫And you are surely going to utilize them maybe during any mission or maybe just to improve your look. 72 00:05:06,870 --> 00:05:09,570 ‫So I hope you got the idea and it's coming this one. 73 00:05:10,700 --> 00:05:17,120 ‫Now, the next one is trancelike, which is pretty common, I let me realize the transform translate. 74 00:05:18,440 --> 00:05:23,150 ‫And this help us to move our element according to its own respective position. 75 00:05:23,540 --> 00:05:27,670 ‫So this translate is going to take two values X as well as wire. 76 00:05:28,050 --> 00:05:32,670 ‫For now, I'm going to take the Translate X, which only date x value. 77 00:05:33,080 --> 00:05:41,120 ‫So if I say 50 percent, that means it will depend on the size of this element itself and move 50 percent. 78 00:05:41,540 --> 00:05:44,690 ‫So 50 percent off fit because x axes. 79 00:05:45,350 --> 00:05:49,930 ‫That means it will move on the right side horizontal axis right side. 80 00:05:49,940 --> 00:05:53,720 ‫By default, it's right for X and bottom for Y. 81 00:05:54,200 --> 00:05:58,400 ‫So it will move right side 50 percent of this weight. 82 00:06:00,350 --> 00:06:01,700 ‫Let me save this one. 83 00:06:02,480 --> 00:06:04,460 ‫You can see it moved 100 pixel. 84 00:06:04,850 --> 00:06:06,110 ‫OK, let me get back. 85 00:06:09,700 --> 00:06:17,590 ‫And now let me drive wide eyed action and say 50 percent, that means that we'll move 50 percent on 86 00:06:17,590 --> 00:06:20,770 ‫the bottom from this whole respective position. 87 00:06:21,070 --> 00:06:24,880 ‫And if I save this one, you can move 100 percent. 88 00:06:25,450 --> 00:06:27,040 ‫So that's how this is going to work. 89 00:06:31,110 --> 00:06:35,980 ‫Now how you can pass two values, let me say 50, as well as 50 percent. 90 00:06:36,330 --> 00:06:41,260 ‫That means it will move 50 percent horizontally and 50 percent more likely. 91 00:06:41,280 --> 00:06:44,040 ‫And if I save this one, you can see it move there. 92 00:06:44,700 --> 00:06:46,490 ‫So that's how this is going to work. 93 00:06:46,500 --> 00:06:52,830 ‫This conflict is important so we can move our element according to their own weight and height. 94 00:06:55,050 --> 00:07:00,930 ‫You can also pass Big Celcius or see five pixels and maybe 10 pixels. 95 00:07:01,350 --> 00:07:04,140 ‫And this is going to work exactly the same way. 96 00:07:04,830 --> 00:07:09,720 ‫And if I jump in on CIUSSS reference, scroll up. 97 00:07:09,720 --> 00:07:17,880 ‫You can see if I see Translate x 40 pixel move or pixel from its own respective position, why move 98 00:07:17,880 --> 00:07:21,450 ‫according to the respective position of move vertically? 99 00:07:22,260 --> 00:07:27,600 ‫And again, remember one important thing you can pass the negative values. 100 00:07:30,930 --> 00:07:35,490 ‫So I heard if I say five big sell, that means it is going to move towards the right direction. 101 00:07:35,850 --> 00:07:37,230 ‫I can say minus five. 102 00:07:38,240 --> 00:07:42,980 ‫It will move on the left side, and if I save this one, you can see how this is moving. 103 00:07:44,000 --> 00:07:47,960 ‫Similarly, for the y axis, not far it is going to go up. 104 00:07:48,380 --> 00:07:51,080 ‫So I hope you got the idea with Translate also. 105 00:07:52,140 --> 00:07:57,990 ‫Now, head, the other thing is, if we want to pass all of them together, what we can do is we can 106 00:07:57,990 --> 00:07:59,880 ‫utilize the shorthand property. 107 00:08:00,150 --> 00:08:06,650 ‫I should not say this shorthand, but we can directly perform, transform and then provide all the real 108 00:08:06,660 --> 00:08:06,990 ‫news. 109 00:08:07,320 --> 00:08:09,720 ‫So if I just copy this one out of 10. 110 00:08:11,400 --> 00:08:12,570 ‫And save this one. 111 00:08:13,140 --> 00:08:15,750 ‫Hey, you can see how this is going to change. 112 00:08:16,230 --> 00:08:18,060 ‫Let me also try and skew. 113 00:08:21,830 --> 00:08:23,720 ‫And yep, it's working fine. 114 00:08:24,110 --> 00:08:28,700 ‫So that's how you can add multiple values, but this is going to create a lot of confusion. 115 00:08:29,120 --> 00:08:30,350 ‫That's our position. 116 00:08:30,600 --> 00:08:35,630 ‫But if you're compatible, what you are doing, you can just perform them individually and then you 117 00:08:35,630 --> 00:08:36,560 ‫can combine them. 118 00:08:37,160 --> 00:08:42,900 ‫So that's how you are going to utilize all these values in the form of coded scale translate as well 119 00:08:42,920 --> 00:08:43,520 ‫as you. 120 00:08:44,700 --> 00:08:48,450 ‫I hope you got the idea how we are going to work with Transform. 121 00:08:49,080 --> 00:08:52,390 ‫Now the other thing is about 3-D, OK? 122 00:08:52,430 --> 00:08:53,700 ‫Things look interesting. 123 00:08:54,060 --> 00:09:00,480 ‫But before that, let me come in this one also saying this one, we didn't do our natural form. 124 00:09:00,930 --> 00:09:11,340 ‫And here let me use, transform, rotate and head if I specifically use Rotate Y and Z 360 degree if 125 00:09:11,340 --> 00:09:12,250 ‫I save this one. 126 00:09:12,270 --> 00:09:14,010 ‫You can see there is no change. 127 00:09:14,310 --> 00:09:14,880 ‫Why? 128 00:09:15,480 --> 00:09:22,800 ‫Because by rotating 360 degrees, it is going to remain on this same position, but it is rotating. 129 00:09:23,720 --> 00:09:24,490 ‫Behind the scene. 130 00:09:24,510 --> 00:09:29,910 ‫What happened is if I utilize property, let me go with our. 131 00:09:31,040 --> 00:09:33,620 ‫Don't worry, we are going to discuss this part, actually. 132 00:09:33,630 --> 00:09:35,900 ‫This is the part of transition. 133 00:09:36,080 --> 00:09:40,250 ‫Another topic we will discuss there here, I'm just giving you a brief idea. 134 00:09:40,800 --> 00:09:45,590 ‫So I suppose we want to transform it in the form of 3-D, actually. 135 00:09:45,600 --> 00:09:48,300 ‫So I suppose we are going to transform it. 136 00:09:48,800 --> 00:09:55,350 ‫Read that 360 degrees on Howard and we are going to change the Khazar 2.0. 137 00:09:55,910 --> 00:09:56,780 ‫Save this one. 138 00:09:56,780 --> 00:10:03,710 ‫And as soon as I harbour, it is transforming, but we are not able to visualize it and go with zero 139 00:10:03,710 --> 00:10:04,370 ‫degree here. 140 00:10:05,120 --> 00:10:07,160 ‫So by default, it is zero degree. 141 00:10:07,340 --> 00:10:10,970 ‫And as soon as we habari, it is rotating towards 360 degree. 142 00:10:11,450 --> 00:10:18,380 ‫But the problem is we are not able to visualize this so far that we have an option called transition. 143 00:10:18,950 --> 00:10:22,820 ‫Transition means how it is going from one phase to another phase. 144 00:10:23,360 --> 00:10:29,900 ‫So how it is going to transact if you understand video editing or if you see any type of movie, any 145 00:10:29,900 --> 00:10:36,290 ‫type of lecture, any type of blog online, you'll see that our transition to go from scene one to scene 146 00:10:36,290 --> 00:10:38,240 ‫to scene to scene three. 147 00:10:38,540 --> 00:10:40,160 ‫There are transitions in video. 148 00:10:40,310 --> 00:10:41,420 ‫I hope you got the idea. 149 00:10:41,780 --> 00:10:46,400 ‫Similarly, we have transition when we are trying to apply something now. 150 00:10:46,400 --> 00:10:48,790 ‫We are going to discuss this in a separate lecture. 151 00:10:48,800 --> 00:10:53,990 ‫Don't worry, but can I just wanted to give you this idea how this transform work in 3D? 152 00:10:54,320 --> 00:10:58,970 ‫So if I see all four of the goes again, don't understand this. 153 00:10:58,970 --> 00:10:59,990 ‫Just visualize. 154 00:11:01,240 --> 00:11:07,780 ‫So if I save this one now, here we are rotating according to Y-axis, so that means our y axis is here 155 00:11:07,780 --> 00:11:08,290 ‫somewhere. 156 00:11:08,290 --> 00:11:10,060 ‫I am not trying to hover over this. 157 00:11:10,330 --> 00:11:12,700 ‫So this here is a mirror on y axis. 158 00:11:13,120 --> 00:11:15,850 ‫And if I try to hover over this, it is rotating. 159 00:11:16,270 --> 00:11:19,780 ‫Now here you can visualize the transform because there is text. 160 00:11:21,380 --> 00:11:24,710 ‫My if say, loaded, according to X-axis. 161 00:11:27,080 --> 00:11:27,980 ‫Save this one. 162 00:11:28,010 --> 00:11:29,750 ‫Now there is some horizontal line. 163 00:11:29,930 --> 00:11:34,220 ‫And if I want to wear this, you can see that's how it is going to look in 3D. 164 00:11:37,120 --> 00:11:38,800 ‫I hope you got the idea. 165 00:11:39,610 --> 00:11:45,670 ‫Now we are going to discuss about this transition later, but I hope you got the idea how this walk 166 00:11:45,670 --> 00:11:46,370 ‫in 3D. 167 00:11:46,870 --> 00:11:54,340 ‫So that's all for this lecture and this we understood about how transform work, about rooted skill, 168 00:11:54,340 --> 00:12:01,330 ‫skill translate and also how do utilize transition just to visualize in 3-D. 169 00:12:01,900 --> 00:12:03,630 ‫Now there are a lot of things that you can do. 170 00:12:03,640 --> 00:12:10,210 ‫Maybe instead of rooted, let's go Redskins if I copied this one out of 10 for now. 171 00:12:13,260 --> 00:12:16,650 ‫Let's come in this want to save this jump in here? 172 00:12:16,710 --> 00:12:19,180 ‫You can see how this is working. 173 00:12:22,120 --> 00:12:24,520 ‫So that will be covered during our transition. 174 00:12:28,700 --> 00:12:29,990 ‫I hope you got the idea. 175 00:12:30,050 --> 00:12:35,480 ‫That's all for this lecture, make sure to practice this transform and I will see you guys later when 176 00:12:35,480 --> 00:12:37,850 ‫we discuss more about transition. 177 00:12:38,420 --> 00:12:40,880 ‫Thank you for falling and I see you guys in the next one.