‫Hey, there.
‫Welcome back, Siobhan, decide now in this lecture there does discuss about Transform now with that
‫name itself, you can see we are going to transform something that is going to be about that object
‫or that there or paragraph or whatever we are walking currently.
‫So basically, whatever the element we are trying to transform, we are going to add a property transform.
‫Now here I did some starting code that means I created.
‫I do added some text called Ask Transform and hair in styling.
‫I created this div added some weight as well as hi, it added some margin so we can have some space
‫default color, which is white, then increase my font size to 30.
‫I need some padding here so to maintain some space and then also added a background color to this particular
‫day.
‫So this is our starting code, and I really wanted to add this before starting this lecture.
‫So we don't waste time on this.
‫That's it.
‫Now, let us focus on transform.
‫So there are five things that we can do to transform any type of element.
‫The first one is to rotated.
‫The second one is to scale it.
‫The third one is to skew it.
‫Four to one is going to be translate and the fifth one is going to be matrix.
‫Now what I mean by all of them.
‫Let's discuss about it.
‫So hard to transform our element just across from property.
‫And this is going to have multiple options.
‫So let's start with rotate, our rotate basically means to rotate our element.
‫And we can pass values in the form of degree, let's say, 45 degrees.
‫And if I save this one, you can see our element is rotating.
‫Maybe let me take 55 degrees.
‫You can see it's rotated, so that means we're transformed, we can control a lot of thing without element.
‫Maybe commanders rotate.
‫Let me try to increase that size so I can utilize, transform and head.
‫I can pass a value in the form of skill.
‫And if I pass one point five and save this one.
‫You can see our default size was 200 by 200, not scale by multiples of 1.5.
‫So it should be 300 by 300.
‫Maybe if I want two degrees, I can go 0.5.
‫You can see and I can also maybe 2.5.
‫So that's how this is going to work.
‫Let me go back to one, which is the default value.
‫Now, had one.
‫Remember one thing you have passing one value that is just a single value here.
‫If I say 1.5, that means 1.5 multiple word as well as height, but we can control only one individual
‫thing itself.
‫So if I say scale X, that means I'm just increasing the value of Exide horizontal side.
‫If I say scale, why that means I'm just increasing the value of vertical side.
‫Now remember here I'm selecting the complete bill.
‫So if I try to transform anything, it will affect everything that is inside this item.
‫That's why you can see even the text is transformed.
‫So if I say scale directly, everything is transform equally on horizontal as well as what they say.
‫So I hope you got the idea what we are trying to do.
‫You can also buy store values together with a call ninety three point five here.
‫So I guess transform according to 3.5 and the words transform according to 1.5 so worth and then height.
‫OK, got it.
‫Let me come in this one now, the next one is about.
‫So just try to use, transform and have you have option about SKU?
‫There are again two main elements SKU in the form of x axis and then my axes.
‫Now, the best thing I can do is recommend the CIUSSS reference.
‫Jump on to transform.
‫So if I say SKU x 15 degrees, that means we are going to skew the element on horizontal axis.
‫You can see and if I say SKU y or 45 degrees, that means the vertical axis.
‫And you can also pass through a lot together.
‫Let me jump here and if I ask you.
‫And simply passed 30 degree here, save this one.
‫You can see that's how it's going to work.
‫Simply say SKU X and POS 45-degree.
‫Save this one.
‫You can see that's how it is going to up and go at white direction, save this one or maybe just remove
‫X Y and us all the bad news.
‫And this is our IT walking.
‫Now these drones forms are important to shape our element.
‫And you are surely going to utilize them maybe during any mission or maybe just to improve your look.
‫So I hope you got the idea and it's coming this one.
‫Now, the next one is trancelike, which is pretty common, I let me realize the transform translate.
‫And this help us to move our element according to its own respective position.
‫So this translate is going to take two values X as well as wire.
‫For now, I'm going to take the Translate X, which only date x value.
‫So if I say 50 percent, that means it will depend on the size of this element itself and move 50 percent.
‫So 50 percent off fit because x axes.
‫That means it will move on the right side horizontal axis right side.
‫By default, it's right for X and bottom for Y.
‫So it will move right side 50 percent of this weight.
‫Let me save this one.
‫You can see it moved 100 pixel.
‫OK, let me get back.
‫And now let me drive wide eyed action and say 50 percent, that means that we'll move 50 percent on
‫the bottom from this whole respective position.
‫And if I save this one, you can move 100 percent.
‫So that's how this is going to work.
‫Now how you can pass two values, let me say 50, as well as 50 percent.
‫That means it will move 50 percent horizontally and 50 percent more likely.
‫And if I save this one, you can see it move there.
‫So that's how this is going to work.
‫This conflict is important so we can move our element according to their own weight and height.
‫You can also pass Big Celcius or see five pixels and maybe 10 pixels.
‫And this is going to work exactly the same way.
‫And if I jump in on CIUSSS reference, scroll up.
‫You can see if I see Translate x 40 pixel move or pixel from its own respective position, why move
‫according to the respective position of move vertically?
‫And again, remember one important thing you can pass the negative values.
‫So I heard if I say five big sell, that means it is going to move towards the right direction.
‫I can say minus five.
‫It will move on the left side, and if I save this one, you can see how this is moving.
‫Similarly, for the y axis, not far it is going to go up.
‫So I hope you got the idea with Translate also.
‫Now, head, the other thing is, if we want to pass all of them together, what we can do is we can
‫utilize the shorthand property.
‫I should not say this shorthand, but we can directly perform, transform and then provide all the real
‫news.
‫So if I just copy this one out of 10.
‫And save this one.
‫Hey, you can see how this is going to change.
‫Let me also try and skew.
‫And yep, it's working fine.
‫So that's how you can add multiple values, but this is going to create a lot of confusion.
‫That's our position.
‫But if you're compatible, what you are doing, you can just perform them individually and then you
‫can combine them.
‫So that's how you are going to utilize all these values in the form of coded scale translate as well
‫as you.
‫I hope you got the idea how we are going to work with Transform.
‫Now the other thing is about 3-D, OK?
‫Things look interesting.
‫But before that, let me come in this one also saying this one, we didn't do our natural form.
‫And here let me use, transform, rotate and head if I specifically use Rotate Y and Z 360 degree if
‫I save this one.
‫You can see there is no change.
‫Why?
‫Because by rotating 360 degrees, it is going to remain on this same position, but it is rotating.
‫Behind the scene.
‫What happened is if I utilize property, let me go with our.
‫Don't worry, we are going to discuss this part, actually.
‫This is the part of transition.
‫Another topic we will discuss there here, I'm just giving you a brief idea.
‫So I suppose we want to transform it in the form of 3-D, actually.
‫So I suppose we are going to transform it.
‫Read that 360 degrees on Howard and we are going to change the Khazar 2.0.
‫Save this one.
‫And as soon as I harbour, it is transforming, but we are not able to visualize it and go with zero
‫degree here.
‫So by default, it is zero degree.
‫And as soon as we habari, it is rotating towards 360 degree.
‫But the problem is we are not able to visualize this so far that we have an option called transition.
‫Transition means how it is going from one phase to another phase.
‫So how it is going to transact if you understand video editing or if you see any type of movie, any
‫type of lecture, any type of blog online, you'll see that our transition to go from scene one to scene
‫to scene to scene three.
‫There are transitions in video.
‫I hope you got the idea.
‫Similarly, we have transition when we are trying to apply something now.
‫We are going to discuss this in a separate lecture.
‫Don't worry, but can I just wanted to give you this idea how this transform work in 3D?
‫So if I see all four of the goes again, don't understand this.
‫Just visualize.
‫So if I save this one now, here we are rotating according to Y-axis, so that means our y axis is here
‫somewhere.
‫I am not trying to hover over this.
‫So this here is a mirror on y axis.
‫And if I try to hover over this, it is rotating.
‫Now here you can visualize the transform because there is text.
‫My if say, loaded, according to X-axis.
‫Save this one.
‫Now there is some horizontal line.
‫And if I want to wear this, you can see that's how it is going to look in 3D.
‫I hope you got the idea.
‫Now we are going to discuss about this transition later, but I hope you got the idea how this walk
‫in 3D.
‫So that's all for this lecture and this we understood about how transform work, about rooted skill,
‫skill translate and also how do utilize transition just to visualize in 3-D.
‫Now there are a lot of things that you can do.
‫Maybe instead of rooted, let's go Redskins if I copied this one out of 10 for now.
‫Let's come in this want to save this jump in here?
‫You can see how this is working.
‫So that will be covered during our transition.
‫I hope you got the idea.
‫That's all for this lecture, make sure to practice this transform and I will see you guys later when
‫we discuss more about transition.
‫Thank you for falling and I see you guys in the next one.