Hello, everyone, and welcome back.
In today's video, you will learn about transformed property in Sears's.
The transformed property allows you to visually manipulate an element by translating, rotating, scaling
and skewing.
Let's start with the first one.
Translate.
We can translate or move elements across X, Y and Z axis.
So we have this div and we want to move it towards the right hand side.
For this we can use translate X and give it a positive value.
Say 20 pixels.
So let's inspect this.
Let's give it a value.
See.
Transform.
Translate X.
And let's give it to our Lucy 20 Vixen's.
And as you can see, move towards the right.
So if I keep increasing the value, it keeps moving towards the right hand side.
Similarly, if I want to move this to the left hand side, I could give it a negative value.
And as you can see, it's moving towards the left hand side.
Similarly, if you wanted to move our elliman top and bottom, we could use translate.
Why?
So let's try that.
So instead of translate X, let's like translate why?
Now, if you want to move it to the bottom of the screen so we could give it a positive value.
And as you can see, so when I increase the value, my element is moving towards the bottom.
Similarly, if I want to move it towards the top, I could give it a negative value.
And as you can see, it's moving towards the top.
This must have reminded you of positioning elements using top right, bottom and left properties.
And yes, you should use these properties to position elements.
But when you want to move things for transition or animations, you should use translate X and translate
why this translate has a shorthand property also.
It's called translate.
So let's give that a try.
So this except two values.
One for translate X and one for translate wife.
Or in other words, one for horizontal and one for vertical.
So let's try that, say, 50 pixels towards the right.
I'm 53 pixels towards the bottom.
When I increase this value, it moves towards the bottom.
And when I reduce this value, it moves towards the top.
Similarly, if I increase this value, it moves towards the right.
And when I reduce it, it moves towards the left.
That's all for the translate property.
So moving on to the next one, which is rooted, as the name suggests, we can use this property to
rotate our extreme elements.
We can rotate elements along the X axis, Y axis and the Z axis.
Let's try unexampled to understand it better.
Now, to use the root intraoperatively could simply add.
Transformed.
And in the rally, we could use Rudy.
So we literally did X.
Oh.
So if we increase this value.
And as you can see, our element is rotating along the horizontal axis.
Similarly, when and reduce the value.
It again rooted along the horizontal axis.
Let's add a text and say it does do so, that it gives us a better clarity.
So coming back, Hugh, let's say.
First live.
Let's save it.
Coming back here.
Let's give it the value, so transform and rotate x 45 degrees.
No one increase the value, as you can see, the element is rotating.
Similarly, when I reduce this rally, say hundred eighty degrees, it is located along the horizontal
axis by 180 degrees.
Similarly, if I make it zero.
So it comes back to the normal position.
Similarly, we can use the retaped while property.
So this is why brother does what it does is it predates the element across the vertical axis.
Let's try and this value.
And as you can see, as the value increases, our element keeps on retreating across the along the way.
Equal access.
Similarly, if I keep increasing it.
It rotates.
And keeps on retreating across along the vertical axis.
Similarly, we can use rotate.
So when we increase the value, as you can see, it is rotating across the Z axis.
So the axis is the line which is perpendicular to your screen.
Similarly, when we reduce the value interdicts anticlockwise.
That's all for this day property.
Moving onto the next property, which is scale.
So let's remove this.
Let's use skill, so skill X.
Let's say do so at this scale, X does is it stretches your company horizontally and this value represents
the times of the normal value.
So if I say do, that means twice the normal value or if I see.
Point five.
So that means half the nominal value.
So if I bring them back to one, so right now, if you notice this first def text, this is how it looks.
But when I reduce the value.
Even the text shrinks.
So it's not just the box, it scales in and out, then died content.
Similarly, we can use a scale Y as well.
And as you can see, when I'm Greece, the value, the box size increases vertically, even this has
a shot under a political scale.
So this accepts two valleys, one for horizontal and Lindvall vertical.
So as you can see, when I change different values, it changes accordingly.
Moving on to the next Roberti, which is skew this property is used to build elements left and right.
Let's try an example to understand better.
So first, let's use SKU X.
Let's see.
Zero degrees.
So when I increase this value, it builds our element towards the left hand side.
So in the anticlockwise.
Similarly, when I go in negative degrees, it builds out our element towards the right and say.
So this is our rescue X works.
We can the element across Y axis also.
So if I increase the value.
It's moving towards the bottom, so it's in its tilting towards the bottom.
Similarly, when a producer.
It's moving towards the top, and that's it, guys, for all the trans stronger bodies.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video by Andy.