1 00:00:01,210 --> 00:00:03,130 Hello, everyone, and welcome back. 2 00:00:03,850 --> 00:00:07,870 In today's video, you will learn about transformed property in Sears's. 3 00:00:09,470 --> 00:00:16,960 The transformed property allows you to visually manipulate an element by translating, rotating, scaling 4 00:00:17,080 --> 00:00:18,100 and skewing. 5 00:00:18,880 --> 00:00:20,290 Let's start with the first one. 6 00:00:20,410 --> 00:00:21,100 Translate. 7 00:00:21,520 --> 00:00:25,960 We can translate or move elements across X, Y and Z axis. 8 00:00:26,380 --> 00:00:30,010 So we have this div and we want to move it towards the right hand side. 9 00:00:30,790 --> 00:00:34,720 For this we can use translate X and give it a positive value. 10 00:00:35,030 --> 00:00:36,030 Say 20 pixels. 11 00:00:36,070 --> 00:00:37,480 So let's inspect this. 12 00:00:38,020 --> 00:00:39,490 Let's give it a value. 13 00:00:39,560 --> 00:00:40,080 See. 14 00:00:40,300 --> 00:00:41,140 Transform. 15 00:00:45,480 --> 00:00:46,770 Translate X. 16 00:00:48,410 --> 00:00:50,840 And let's give it to our Lucy 20 Vixen's. 17 00:00:50,990 --> 00:00:52,850 And as you can see, move towards the right. 18 00:00:53,330 --> 00:00:57,380 So if I keep increasing the value, it keeps moving towards the right hand side. 19 00:00:57,890 --> 00:01:02,090 Similarly, if I want to move this to the left hand side, I could give it a negative value. 20 00:01:03,770 --> 00:01:06,930 And as you can see, it's moving towards the left hand side. 21 00:01:07,500 --> 00:01:12,390 Similarly, if you wanted to move our elliman top and bottom, we could use translate. 22 00:01:12,420 --> 00:01:12,800 Why? 23 00:01:13,650 --> 00:01:14,670 So let's try that. 24 00:01:16,470 --> 00:01:19,340 So instead of translate X, let's like translate why? 25 00:01:20,060 --> 00:01:24,560 Now, if you want to move it to the bottom of the screen so we could give it a positive value. 26 00:01:25,320 --> 00:01:29,840 And as you can see, so when I increase the value, my element is moving towards the bottom. 27 00:01:30,380 --> 00:01:34,430 Similarly, if I want to move it towards the top, I could give it a negative value. 28 00:01:35,680 --> 00:01:38,230 And as you can see, it's moving towards the top. 29 00:01:38,710 --> 00:01:43,900 This must have reminded you of positioning elements using top right, bottom and left properties. 30 00:01:45,210 --> 00:01:48,270 And yes, you should use these properties to position elements. 31 00:01:48,960 --> 00:01:54,540 But when you want to move things for transition or animations, you should use translate X and translate 32 00:01:54,540 --> 00:01:57,740 why this translate has a shorthand property also. 33 00:01:58,710 --> 00:01:59,590 It's called translate. 34 00:01:59,610 --> 00:02:00,750 So let's give that a try. 35 00:02:02,110 --> 00:02:04,220 So this except two values. 36 00:02:04,360 --> 00:02:07,180 One for translate X and one for translate wife. 37 00:02:07,600 --> 00:02:11,080 Or in other words, one for horizontal and one for vertical. 38 00:02:11,710 --> 00:02:15,490 So let's try that, say, 50 pixels towards the right. 39 00:02:16,530 --> 00:02:18,930 I'm 53 pixels towards the bottom. 40 00:02:20,220 --> 00:02:22,980 When I increase this value, it moves towards the bottom. 41 00:02:23,430 --> 00:02:26,070 And when I reduce this value, it moves towards the top. 42 00:02:27,030 --> 00:02:30,510 Similarly, if I increase this value, it moves towards the right. 43 00:02:30,660 --> 00:02:33,420 And when I reduce it, it moves towards the left. 44 00:02:33,840 --> 00:02:35,640 That's all for the translate property. 45 00:02:36,270 --> 00:02:42,240 So moving on to the next one, which is rooted, as the name suggests, we can use this property to 46 00:02:42,240 --> 00:02:44,090 rotate our extreme elements. 47 00:02:44,550 --> 00:02:49,500 We can rotate elements along the X axis, Y axis and the Z axis. 48 00:02:50,220 --> 00:02:52,430 Let's try unexampled to understand it better. 49 00:02:52,930 --> 00:02:56,250 Now, to use the root intraoperatively could simply add. 50 00:02:57,400 --> 00:02:58,030 Transformed. 51 00:02:58,470 --> 00:03:00,470 And in the rally, we could use Rudy. 52 00:03:01,260 --> 00:03:02,950 So we literally did X. 53 00:03:03,650 --> 00:03:03,790 Oh. 54 00:03:04,050 --> 00:03:05,470 So if we increase this value. 55 00:03:05,880 --> 00:03:10,890 And as you can see, our element is rotating along the horizontal axis. 56 00:03:11,760 --> 00:03:13,560 Similarly, when and reduce the value. 57 00:03:13,820 --> 00:03:16,680 It again rooted along the horizontal axis. 58 00:03:17,230 --> 00:03:21,510 Let's add a text and say it does do so, that it gives us a better clarity. 59 00:03:22,020 --> 00:03:24,990 So coming back, Hugh, let's say. 60 00:03:26,910 --> 00:03:28,140 First live. 61 00:03:30,000 --> 00:03:30,620 Let's save it. 62 00:03:32,340 --> 00:03:33,240 Coming back here. 63 00:03:35,550 --> 00:03:41,550 Let's give it the value, so transform and rotate x 45 degrees. 64 00:03:43,220 --> 00:03:48,200 No one increase the value, as you can see, the element is rotating. 65 00:03:54,050 --> 00:04:00,500 Similarly, when I reduce this rally, say hundred eighty degrees, it is located along the horizontal 66 00:04:00,500 --> 00:04:02,480 axis by 180 degrees. 67 00:04:03,290 --> 00:04:04,670 Similarly, if I make it zero. 68 00:04:05,030 --> 00:04:06,860 So it comes back to the normal position. 69 00:04:07,370 --> 00:04:10,130 Similarly, we can use the retaped while property. 70 00:04:12,840 --> 00:04:18,090 So this is why brother does what it does is it predates the element across the vertical axis. 71 00:04:18,780 --> 00:04:20,760 Let's try and this value. 72 00:04:25,150 --> 00:04:31,780 And as you can see, as the value increases, our element keeps on retreating across the along the way. 73 00:04:31,830 --> 00:04:32,770 Equal access. 74 00:04:33,220 --> 00:04:34,930 Similarly, if I keep increasing it. 75 00:04:36,320 --> 00:04:37,130 It rotates. 76 00:04:38,160 --> 00:04:41,230 And keeps on retreating across along the vertical axis. 77 00:04:41,830 --> 00:04:43,570 Similarly, we can use rotate. 78 00:04:44,770 --> 00:04:50,550 So when we increase the value, as you can see, it is rotating across the Z axis. 79 00:04:50,570 --> 00:04:54,400 So the axis is the line which is perpendicular to your screen. 80 00:04:59,260 --> 00:05:03,370 Similarly, when we reduce the value interdicts anticlockwise. 81 00:05:06,690 --> 00:05:09,030 That's all for this day property. 82 00:05:09,630 --> 00:05:11,930 Moving onto the next property, which is scale. 83 00:05:12,930 --> 00:05:14,220 So let's remove this. 84 00:05:15,950 --> 00:05:19,700 Let's use skill, so skill X. 85 00:05:21,150 --> 00:05:31,140 Let's say do so at this scale, X does is it stretches your company horizontally and this value represents 86 00:05:31,380 --> 00:05:33,060 the times of the normal value. 87 00:05:33,090 --> 00:05:37,560 So if I say do, that means twice the normal value or if I see. 88 00:05:38,720 --> 00:05:39,550 Point five. 89 00:05:39,680 --> 00:05:41,660 So that means half the nominal value. 90 00:05:42,200 --> 00:05:48,080 So if I bring them back to one, so right now, if you notice this first def text, this is how it looks. 91 00:05:48,110 --> 00:05:49,610 But when I reduce the value. 92 00:05:51,300 --> 00:05:52,830 Even the text shrinks. 93 00:05:53,130 --> 00:05:57,570 So it's not just the box, it scales in and out, then died content. 94 00:05:59,400 --> 00:06:01,850 Similarly, we can use a scale Y as well. 95 00:06:08,060 --> 00:06:14,270 And as you can see, when I'm Greece, the value, the box size increases vertically, even this has 96 00:06:14,270 --> 00:06:15,970 a shot under a political scale. 97 00:06:16,310 --> 00:06:20,510 So this accepts two valleys, one for horizontal and Lindvall vertical. 98 00:06:23,340 --> 00:06:28,020 So as you can see, when I change different values, it changes accordingly. 99 00:06:28,440 --> 00:06:35,130 Moving on to the next Roberti, which is skew this property is used to build elements left and right. 100 00:06:35,910 --> 00:06:38,310 Let's try an example to understand better. 101 00:06:38,760 --> 00:06:40,980 So first, let's use SKU X. 102 00:06:42,440 --> 00:06:43,160 Let's see. 103 00:06:43,430 --> 00:06:44,300 Zero degrees. 104 00:06:45,080 --> 00:06:50,000 So when I increase this value, it builds our element towards the left hand side. 105 00:06:50,900 --> 00:06:53,360 So in the anticlockwise. 106 00:06:55,250 --> 00:07:00,510 Similarly, when I go in negative degrees, it builds out our element towards the right and say. 107 00:07:05,360 --> 00:07:07,520 So this is our rescue X works. 108 00:07:07,820 --> 00:07:11,520 We can the element across Y axis also. 109 00:07:11,630 --> 00:07:13,130 So if I increase the value. 110 00:07:15,180 --> 00:07:19,650 It's moving towards the bottom, so it's in its tilting towards the bottom. 111 00:07:19,710 --> 00:07:21,140 Similarly, when a producer. 112 00:07:23,240 --> 00:07:28,320 It's moving towards the top, and that's it, guys, for all the trans stronger bodies. 113 00:07:29,210 --> 00:07:30,200 That's all for today, guys. 114 00:07:30,290 --> 00:07:32,450 If there is something that you did not understand. 115 00:07:32,570 --> 00:07:35,090 Feel free to drop a comment and we will discuss it. 116 00:07:36,150 --> 00:07:38,310 See you in the next video by Andy.