1 00:00:00,870 --> 00:00:09,540 OK, guys, here, we got that chance for XHTML and also that transform don't see us here. 2 00:00:09,540 --> 00:00:19,680 We can just type at 2pm at 5:00 and they just want to be tranced for let's call here and here. 3 00:00:19,680 --> 00:00:25,910 We had this Web page letter targeting the Web page and talk about that transforms. 4 00:00:26,220 --> 00:00:31,620 Let's first connect between this time and at the CFS. 5 00:00:31,920 --> 00:00:40,090 Stylesheet and atch are apt to be a thorium transform dot. 6 00:00:40,110 --> 00:00:42,190 See if that's OK. 7 00:00:42,630 --> 00:00:49,470 The first thing we will start with is how to add, transform, translate X and I'm going to show I'm 8 00:00:49,470 --> 00:00:51,390 going to show you what is that. 9 00:00:51,390 --> 00:00:53,040 Transform translate. 10 00:00:53,610 --> 00:01:02,640 We can go here and type with class of let's just make it all orange and then into this part or we can 11 00:01:02,640 --> 00:01:04,710 just make it translate. 12 00:01:05,400 --> 00:01:06,750 Translate. 13 00:01:06,920 --> 00:01:18,270 OK, and if anything we can just talk about we can go here to the child up and make trance for translate 14 00:01:18,300 --> 00:01:29,680 and translate to be having the pairing of five party and background color of orange red. 15 00:01:31,170 --> 00:01:32,910 OK, we got this tape right now. 16 00:01:33,180 --> 00:01:46,630 Let's just make it to be having that with 50 percent and position relative transformatory left of center. 17 00:01:48,060 --> 00:01:49,520 No, that's not good. 18 00:01:50,310 --> 00:01:53,250 Let's just make it five percent. 19 00:01:54,020 --> 00:01:54,900 OK, that's good. 20 00:01:54,900 --> 00:01:55,170 Right? 21 00:01:55,180 --> 00:01:58,300 Now let's jump to the position. 22 00:01:58,370 --> 00:01:58,880 It's OK. 23 00:01:59,220 --> 00:02:09,270 And now when we go and we load, let's say that I want to move this by let's say I want to move this 24 00:02:09,270 --> 00:02:11,220 division by 20 pixels. 25 00:02:11,490 --> 00:02:15,840 There's a property which is called just for translate here. 26 00:02:15,840 --> 00:02:18,170 We can make four up. 27 00:02:18,780 --> 00:02:21,210 And here we got all of that transform. 28 00:02:21,210 --> 00:02:22,050 We got kids. 29 00:02:22,050 --> 00:02:30,630 Q Excuse, why translate three people just e mail that translate X here. 30 00:02:30,810 --> 00:02:40,650 We can give Springfields of thought when we put put pixels when we go back and reload now it moved by 31 00:02:40,860 --> 00:02:49,160 four pixels and also we can make it move to the opposite direction, we can make it to negative four 32 00:02:49,350 --> 00:03:02,490 pixels and now it went here and we can also use that translate why we can make this here, translate 33 00:03:02,490 --> 00:03:03,030 why. 34 00:03:03,750 --> 00:03:07,440 And now we got this up here for that translate why. 35 00:03:07,590 --> 00:03:12,930 And also we can make it to the downward direction. 36 00:03:13,350 --> 00:03:15,690 And now we got this letter. 37 00:03:15,690 --> 00:03:18,030 Just type some content inside here. 38 00:03:18,390 --> 00:03:20,820 That's too with Lorem. 39 00:03:21,510 --> 00:03:22,530 OK, that's good. 40 00:03:22,710 --> 00:03:26,640 Or let's just make it actual, OK. 41 00:03:27,770 --> 00:03:33,710 Extra, extra to be just small. 42 00:03:34,340 --> 00:03:41,210 And now we're told about that transform, our translator explained why, but what if I want to make 43 00:03:41,210 --> 00:03:44,300 it for one property of X and Y? 44 00:03:44,660 --> 00:03:56,870 We can just type translate ain't 40 pixels for X or let's just make it fit for the X and 50 pixels for 45 00:03:56,870 --> 00:03:58,980 the Y, we can go and save it. 46 00:03:59,330 --> 00:04:06,860 Now that got this 50 pixels for the Y direction, but there were pixels for the X direction. 47 00:04:07,190 --> 00:04:12,570 We can make it here also for pixels save and go here. 48 00:04:12,950 --> 00:04:23,150 So now we got this 14 pixels and after this chance to translate, we can talk about that, transform 49 00:04:23,540 --> 00:04:26,360 off rotate and how we can use it. 50 00:04:27,170 --> 00:04:32,600 We can go here correcting Univision or we can just cut this one. 51 00:04:33,230 --> 00:04:35,000 This one to be four. 52 00:04:35,570 --> 00:04:39,570 Rotate, rotate. 53 00:04:39,830 --> 00:04:42,380 Let's go to the C file. 54 00:04:42,800 --> 00:04:46,730 Copy this part, paste this one to be able to tape. 55 00:04:48,110 --> 00:04:52,250 And let me guess, you want to be for just orbanes. 56 00:04:54,650 --> 00:04:55,580 OK, that's good. 57 00:04:56,300 --> 00:05:01,350 Let's get some larger top of 20 pixels and also Martian. 58 00:05:01,370 --> 00:05:04,580 Put them up 20 minutes. 59 00:05:05,460 --> 00:05:10,730 OK, uh, we got something wrong. 60 00:05:11,000 --> 00:05:11,600 No, no. 61 00:05:11,700 --> 00:05:19,430 OK, so now that let's just talk about that transform off rotate. 62 00:05:19,430 --> 00:05:20,540 We want to like this one. 63 00:05:22,400 --> 00:05:24,230 We just got a problem here. 64 00:05:24,830 --> 00:05:25,810 What's the problem? 65 00:05:25,820 --> 00:05:35,510 Because of the translation of this part, we can't increase the margin to be fifty, I think. 66 00:05:36,410 --> 00:05:36,830 No. 67 00:05:36,830 --> 00:05:37,490 Still there. 68 00:05:37,790 --> 00:05:40,790 We can just make it to 80. 69 00:05:41,810 --> 00:05:42,830 OK, that's good. 70 00:05:43,340 --> 00:05:47,000 Let's talk now about that transform of rotate. 71 00:05:47,300 --> 00:05:52,430 We can rotate all of the division you think transform, rotate. 72 00:05:52,850 --> 00:05:57,590 Let's just make here transform, rotate. 73 00:05:58,790 --> 00:06:07,070 And inside here, if you have if you have a basic knowledge of math, we will use degrees to make any 74 00:06:07,070 --> 00:06:14,310 rotation like you just try to make fifty degrees when we go a five. 75 00:06:14,840 --> 00:06:18,580 So now we got the rotation with fifty degrees. 76 00:06:18,830 --> 00:06:21,740 We can also make it in the negative direction 77 00:06:25,100 --> 00:06:27,380 and now we got in the negative direction. 78 00:06:27,980 --> 00:06:29,180 I'm going to show you something. 79 00:06:29,690 --> 00:06:35,300 Some websites are using the rotate method to make that text rotated. 80 00:06:35,300 --> 00:06:41,810 I'm going to show you how to deal with this, but luckily the background better reload. 81 00:06:42,560 --> 00:06:44,480 Let's make it ninety degrees. 82 00:06:45,740 --> 00:06:48,230 So now we got the text rotated. 83 00:06:48,980 --> 00:06:54,110 If we just keep one line, I am okay. 84 00:06:56,690 --> 00:06:59,930 And now we got the text rotate and that's good. 85 00:07:01,160 --> 00:07:02,710 OK, that's perfect. 86 00:07:03,650 --> 00:07:08,000 And now after this part, we can set everything back. 87 00:07:10,190 --> 00:07:13,790 OK, save and save. 88 00:07:15,230 --> 00:07:16,100 OK, good. 89 00:07:17,390 --> 00:07:24,440 After we talked about that rotate, we can talk about this cube and how we can use it. 90 00:07:24,800 --> 00:07:26,750 We can create a new division here 91 00:07:29,840 --> 00:07:32,060 and just call it cube. 92 00:07:33,890 --> 00:07:35,050 We can go do that. 93 00:07:35,570 --> 00:07:42,800 But before we move to this point, there is a chance to explain why we are using this for all directions 94 00:07:43,280 --> 00:07:47,210 we can type here, just rotate X. 95 00:07:48,950 --> 00:07:53,390 So now we got the X, now we can see this here, rotate it. 96 00:07:53,390 --> 00:07:56,690 And if we increase more by not the three. 97 00:07:59,060 --> 00:08:06,200 So now it's transitory to rotate it to explain to degrees so it has no width. 98 00:08:06,200 --> 00:08:09,380 But what if I make this to be one two zero. 99 00:08:09,980 --> 00:08:18,020 Now we got this rotated by one to zero and also we have the Y direction. 100 00:08:18,020 --> 00:08:25,310 If I use the one direction, we got this, but I always prefer to use just rotate. 101 00:08:27,200 --> 00:08:28,790 Let's make it just rotate. 102 00:08:29,730 --> 00:08:31,240 OK, that's perfect. 103 00:08:31,280 --> 00:08:34,010 Let's make it to 30 degrees. 104 00:08:35,420 --> 00:08:36,380 OK, that's good. 105 00:08:37,040 --> 00:08:45,680 And after this part, let's talk about the position sorry, the function of Q we can copy this part 106 00:08:45,680 --> 00:08:46,520 right here. 107 00:08:48,800 --> 00:08:52,490 Q And what color can we give here? 108 00:08:53,840 --> 00:08:55,220 OK, this color. 109 00:08:56,900 --> 00:08:58,670 Let's delay this transform. 110 00:08:59,570 --> 00:09:00,550 OK, that's good. 111 00:09:01,250 --> 00:09:05,150 And here we will use just for us. 112 00:09:05,190 --> 00:09:11,940 Q We got also Q X and Q Why we can't make here transform. 113 00:09:11,970 --> 00:09:17,990 We get all of the properties right here we can talk about where is this. 114 00:09:17,990 --> 00:09:23,580 Q This one we got Q X and Q why we can give. 115 00:09:23,630 --> 00:09:28,870 Q And then inside here we can use that angle to the ground. 116 00:09:30,500 --> 00:09:32,750 So now we can see this. 117 00:09:32,750 --> 00:09:36,620 Q And it's different from this one here. 118 00:09:37,580 --> 00:09:40,430 We can make it just for the group. 119 00:09:41,420 --> 00:09:45,250 And then we got this and now this is the property of this. 120 00:09:45,260 --> 00:09:49,050 Q Let's try to make it for the Q exp. 121 00:09:51,410 --> 00:10:02,150 Now we got this Q X and also we I make it to death Y we got this Q Y so there's X in this direction 122 00:10:02,420 --> 00:10:05,750 and this is the Y for the Y direction. 123 00:10:05,990 --> 00:10:12,980 And if I make it back then we got this and I always starts you with just. 124 00:10:12,980 --> 00:10:18,650 Q But if you prefer to use Q, X or Y you can just use them. 125 00:10:19,550 --> 00:10:25,730 And after this one we can just talk about that transform of scale. 126 00:10:26,600 --> 00:10:31,340 Let's just give you an introduction about that transform of the scale. 127 00:10:32,030 --> 00:10:37,760 Let's say that I have this with this position, but I want it to be larger. 128 00:10:39,530 --> 00:10:43,910 We can use something which is called transform of scale. 129 00:10:44,270 --> 00:10:46,610 Let's just create a new one right here. 130 00:10:49,730 --> 00:10:55,820 And or we can just copy this part and paste this one. 131 00:10:55,820 --> 00:11:01,480 We just called it scale and we can go now to our S. 132 00:11:04,380 --> 00:11:11,250 Combative style and function and paint, but this won't be before skill. 133 00:11:12,360 --> 00:11:15,720 And here we can just give it a background color. 134 00:11:16,440 --> 00:11:25,150 Let's try to identify what background color we can give it tomato and we will duly transform. 135 00:11:26,280 --> 00:11:27,830 OK, now we got this. 136 00:11:28,650 --> 00:11:32,670 Let's just say that I want here to make it larger. 137 00:11:33,180 --> 00:11:38,330 There is a prop. I told you which is called transform translate. 138 00:11:38,880 --> 00:11:45,630 We can go here transformer 30 times performance of scale. 139 00:11:45,640 --> 00:11:46,380 I'm so sorry. 140 00:11:47,530 --> 00:11:49,650 Enter in here. 141 00:11:50,340 --> 00:11:56,550 It's already having the scale of one scale of one means one hundred percent. 142 00:11:56,940 --> 00:11:59,550 What if I want to make it just 90 percent. 143 00:11:59,940 --> 00:12:04,820 Just type O point nine which is 90 percent. 144 00:12:04,830 --> 00:12:12,910 You will multiply this number by eight hundred to get the percentage when we save and grow here. 145 00:12:13,440 --> 00:12:21,600 So now we got this smaller and we can use until we go to any number we wish to see from here. 146 00:12:21,870 --> 00:12:24,330 But this is very small and unreachable. 147 00:12:25,020 --> 00:12:28,440 Let's just make it 0.01, which is 10 percent. 148 00:12:29,150 --> 00:12:30,180 And then we got this. 149 00:12:30,780 --> 00:12:41,490 If we if we don't, we can see the text and also we can make it larger than the one we can use for one 150 00:12:41,490 --> 00:12:42,420 point three. 151 00:12:43,080 --> 00:12:45,090 And then we got the one point three. 152 00:12:45,360 --> 00:12:47,600 We can use five point three. 153 00:12:47,910 --> 00:12:50,400 You can use any number you want. 154 00:12:51,120 --> 00:12:54,900 And we get also the scale X asking why. 155 00:12:55,830 --> 00:12:57,390 Let's put it back to one. 156 00:12:59,220 --> 00:13:03,220 Let's just try to scale at one point four. 157 00:13:04,500 --> 00:13:14,160 So now we got this scale just in X axis and also we have four the wide like just split it back into 158 00:13:14,160 --> 00:13:14,580 one 159 00:13:17,940 --> 00:13:18,500 reload. 160 00:13:19,590 --> 00:13:21,750 Let's try now scale of one. 161 00:13:21,750 --> 00:13:24,930 Let's just make it one point five four. 162 00:13:24,960 --> 00:13:36,600 Now, it is structured in the Y direction and now that's all about that transform after we got here. 163 00:13:37,140 --> 00:13:40,290 Translate, rotate, cube and scale. 164 00:13:41,150 --> 00:13:51,470 But what if I volunteer to add more than one property for just four in one class, we can try to go 165 00:13:51,470 --> 00:14:03,620 here and avenue division and we can give it a class of all and then we can go to this part company scale 166 00:14:04,880 --> 00:14:05,490 before the. 167 00:14:07,920 --> 00:14:10,920 And let me just make this really audible anyway. 168 00:14:12,700 --> 00:14:23,890 And here we can type background color, we got violent when we go and reload, margin top like make 169 00:14:23,890 --> 00:14:25,420 it to one hundred people. 170 00:14:26,290 --> 00:14:27,040 We need more. 171 00:14:28,210 --> 00:14:29,620 What, about two hundred? 172 00:14:31,390 --> 00:14:32,560 Two hundred is enough. 173 00:14:33,160 --> 00:14:40,430 OK, let's what let's say that I want to use that transform or translate rotate. 174 00:14:40,690 --> 00:14:46,590 Q skill and all in just one line or transform. 175 00:14:47,080 --> 00:14:48,190 We can type here. 176 00:14:48,880 --> 00:14:49,710 Transform. 177 00:14:52,800 --> 00:14:56,400 And the first thing we can start with is translate. 178 00:14:58,150 --> 00:15:07,070 Fourth and fifth and so so now we've got this fleet and let's say that I want to add a property for 179 00:15:07,100 --> 00:15:11,030 the scale, we can use your scale of one point five. 180 00:15:11,490 --> 00:15:12,580 You got something wrong? 181 00:15:15,680 --> 00:15:22,670 So now we got the one point five, let's just make it to one point one, OK, that's good. 182 00:15:23,280 --> 00:15:33,890 And also we can add more we can try to add something for this cue cue of just with some degree. 183 00:15:35,090 --> 00:15:43,820 We got this cue here and now we can also use for the what what do we have here? 184 00:15:45,140 --> 00:15:45,950 The rotate. 185 00:15:45,980 --> 00:15:46,420 Yes. 186 00:15:46,740 --> 00:15:50,950 Here we can use the rotate of 40 degrees. 187 00:15:52,310 --> 00:15:54,770 And now we got also the rotate. 188 00:15:55,670 --> 00:16:03,080 Now we know how to use that transfer of translate, rotate, cue scale. 189 00:16:03,440 --> 00:16:05,930 And let's just make this to be just skill. 190 00:16:06,110 --> 00:16:14,620 And we also know how to use all of properties of translate just in one line, OK? 191 00:16:14,780 --> 00:16:16,100 And that's good. 192 00:16:16,370 --> 00:16:24,290 In the next video, we will know how to use the displays of the seats as we got display of legs, display 193 00:16:24,290 --> 00:16:24,910 of non. 194 00:16:24,920 --> 00:16:27,710 And we've got some though. 195 00:16:27,710 --> 00:16:29,460 Good luck and have fun.