Understanding 2D Transformation in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we had seen CSS transform and resize property.

With transform, we had also seen the Rotate property, the transform origin one.

So, I hope in the last segment, whatever practicals were given.

Those are a little tough, both CSS advanced level topics.

I hope you have performed those practicals on your own.

You must have practiced and tried it.

Okay guys! so,

Our today’s segment is on CSS 2D transforms.

How can we transform the image, element, division or whatever we have with us?

So, basically CSS transforms, what is it?

So, it gives us different properties.

So, that our current element that is there, it can get transformed.

Transformed means that going from one to the other, means going from one view to the other view.

So, if I have a thing and I rotate it that will also be a transform, that my thing has got rotated.

Like if there is a human being, initially when it is born, at that time it is a baby and then when his age increases, he gets young and then old.

So, this is a type of transformation, in which we can see a transformation from a kid to an adult.

So, this is also a transformation.

Right, guys!

CSS transforms means that changing from one element’s view to another.

For Transform there are different properties available with us?

Like translate, rotate, scale and skew.

We'll see each of these properties one by one.

With the help of all these properties, we can change the shape of our element or we can change its size or we can change its position like scale is used for the size, we rotate we can change the shape slightly.

With translate, we can change the position.

So, a lot of Transform’s properties are available with us like translate, rotate, scale and skew.

There are three properties of skew.

If we want it only in x direction, then skew X, if you want it in y direction then skew Y.

If you want it in both directions then skew.

In rotate, also it is the same.

For X and Y direction only rotate X and rotate Y is also available.

And at the end we have a matrix.

Okay, guys!

The first property is translate.

In translate, what happens, we move our element either in x direction or in y direction.

 Like it is written here, transform, translate  then, 100px, 80px, this is our example.

But normally with transform we use translate.

For this we will open the Sublime Text.

HTML, example, transform, save, transform.html.

We will open this program.

Okay.

So, this is our programme of transform.

What will we do now?

Simply to generate this program, we will first of all generate a division.

For example, we will write in the division.

This is a div element that is going to be translated; transform, translate.

This programme should be called translate.

We will rename it at the end, that is going to be translated, that’s it, save.

Now what will we do?

If we reload it you can see that we are getting a division here.

But to see if the position has changed, what will we do?

For that we'll give it a style, div.

Now, we will first of all give width to this division.

Width, 300pixels, height 100 pixels.

With the background color, we get to know that the space has changed.

Background color, yellow.

After that, we will also give it a border; one px, solid red, And let’s say, now we have to perform translate on it.

Okay, then.

First of all, we will save it.

You can see that our division, yellow color background, red color border and it is set in the leftmost corner.

As soon as I transform on it, which property of transform we have to use?

That is translate.

Okay.

So, in translate, we will first of all move it in the X direction.

So, let's say, we will take 100 pixels; save, reload.

So, my division has moved 100 pixel in x direction.

Now I want that, it should move in the Y direction also.

So let’s say, I take 80 pixels in the Y direction.

Okay.

So, as soon as I moved in X, then 100 pixels on the right-hand side.

After that I moved in Y, it moved 80 pixels below.

 So, what we did was simply translate the element.

Translate means we have moved it from one place to another.

So, when we want to change the position of our element, in that case, we can perform translate.

Translate is quite easy compared to others.

Simply, in the X and Y axis, only in the X axis and only in Y axis , we can change its position.

 Okay guys, clear !

Next is our rotate.

How can we perform rotate?

We can perform it clockwise or anti clockwise, as per our requirement.

First of all, we will copy the same program.

Here we will write rotate, here save, rotate.html.

We will open this programme.

So this was our translate.

This one is of the rotate.

If we perform the rotate, how does it work?

For rotate, what do we have to do?

Simply; transform, rotate.

In rotate, let's say I want to perform it over 30 degrees.

So, I will write 30 degrees here.

As soon as I write 30 degrees, my element has got rotated on 30 degrees.

Our rest of the potion has gone up.

So, what I will do is I will keep this div as it is.

Again, I will generate the same division and here I'll give class; id, rotate div, #, so this is my rotate div.

I will remove this portion over here.

I want that, this should look a little proper.

So, this is my original division and this is my rotated division.

So, from this it is identified that this is my original position is this, and my rotated division is this.

So, for rotation I have written 30 degrees so it has moved on 30 degrees.

This is a div element without performing rotation, an element that is rotated to 30 degrees.

Okay.

So, this is our rotation, we simply have to apply rotate.

If we are working with other browsers.

In that case, we can apply ms transform or webkit transform.

clear guys!

What comes ahead is our scale.

 Scale is used to make our current image or current element size big or small.

If my current scale is always the default one, I can either make it big or small.

It has two views.

You can see here that 2.5 and 2 are written.

So, our first width would be for width and second would be for height.

So, if I'm writing here 2.5.

So, the browser will multiply the image and element’s width 2.5 times.

And if I am making it 2, my height will be 2 times bigger.

So, we are scaling it, we are either increasing it or decreasing it.

 We will copy the same thing for this as well, paste.

We will remove the rotate division.

Scale, element, going to be scaled; save, scale.html.

okay!

So, this is my original, without performing scale.

When we will perform scaling on it, we will write something here, like transform, scale, 2.5 that is for the width, 2, that is for the height.

So, as soon as we perform the scale, from this position the portion has become big.

So, it is looking this way.

So, what can I do about this?

I have to bring my element down a little.

So, for that I will take the margin, margin 150 pixels.

After giving the margin, I will comment this portion, and we will load it.

So, my element is visible with 50 pixels.

Now, I will uncomment it and reload it.

So, this is my element that is scaled.

okay!

Scaled, and in 100% view it is looking somewhat like this.

The element has got bigger in the width and even in the height.

Whatever our width, it was 300.

So, 300 multiplied by 2.5 and height that is 100 multiplied by 2.

So, in this portion, this scaling has been performed.

Okay, so this was our scale.

Next comes our after scale, skew X.

Skew means that above the angle.

Skew is also like rotation but we skew on one angle.

Means it is not perfectly 90 degrees.

But we are skewing.

So, for skew we have 30 degrees, we can skew in X direction or we can skew in Y direction.

So, we can skew in both directions.

Usually skew means that, like for example, currently my phone is there and I am performing skew to the phone.

So, my corners are there on both sides.

My skew would be in X direction, it will get stretched a little.

We can say it.

Currently if it is looking like a rectangle, it will be converted into parallelogram.

Parallelogram means the top and the bottom sizes will stay as it is.

But my sides are there, Those will tilt in some directions.

Means whichever degree I have shown here.

In that direction both will tilt, they will move.

My rectangle that is there, my current rectangle will move and become a parallelogram.

So, even this we will perform practically, so that we can bet more ideas for this.

Okay, guys!

So, let’s say I will copy the same thing.

Skew X.

First of all, we will remove this transform line.

We will also remove the margin, save, going to be skewed, along with X direction, okay.

We will name it skew.html.

So, this is our original without performing skew.

okay!

Now we will perform skew over it.

What we can do for the skew.

We will 1st of all keep this division as it is.

We will take another division.

We will give it an ID, skew-X, save.

Since it is an ID so #.

Now, in this we will perform the skew, so transform, skew X 30 degrees, save, reload.

So, you can see that this is my original division in X direction.

Means this horizontal direction that is there.

In this X direction, both our borders have tilted 30 degrees and our parallelogram is getting generated here.

So, instead of a normal rectangle, we are getting the element like a parallelogram.

Means our normal element has skewed in X direction.

Got it?

If we copy the same thing and keep it here, that will be for Y direction.

We will take Y here as well, Y and Y;save, skew, Y.html .

we will run this.

So, this is in the Y direction.

So, these sides are as it is but the top sides, the long ones,  are skewed at 30 degrees as you can see.

When I had explained with the example of the phone.

Earlier these both sides were tilted, they were curved at an angle.

Now, these two sides are getting curved.

Means whatever we are giving in the skew, on X and Y, in that way it is getting curved.

clear guys, okay!

Then comes our skew, only skew, what can we do in it?

In only the skew, both the directions will move.

So, I am removing the skew from all the sides along with X direction and Y direction.

Okay.

So, skew 30 degrees.

Skew X and Skew Y both, in that case with X we have to give Y.

So, let’s say this time I will give 20 degrees.

Means the 1st portion, the 1st parameter.

That will indicate the X direction.

My second parameter will indicate my Y direction.

So, form X and Y direction 30 and 20, save, so this is our skew.html.

We will run the skew.

So, this is our skew, it is an indication that we have moved it in both X and Y direction.

With the help of skew, we get a slight 3D view.

As both in X and Y direction the movement is performed.

So, here we get a slight 3D view as well.

So, this was our skew X, skew Y and skew.

We have seen all 3 properties of transform.

Clear, guys!

At the end comes our Matrix.

What is the use of the Matrix?

Like it is written here.

The CSS Matrix method combines all the six 2D transform methods altogether.

Means what all we have seen that we can apply here together.

Like, scale X, scale Y, skew X, skew Y, translate X and translate Y.

But you can see that the method to writing this, scale is on 1st and 4th position.

So, you will have to keep this in mind that how it works.

With the help of Matrix if we are applying all these properties.

In that case, I have to remember that the 1st one shows the scale, the second one skew, the third one also shows the skew but 4th is the scale parameter.

And at last, the 2 parameters come in translate X and translate Y direction.

So, if we are performing it through the Matrix, how can we do that?

So, let’s say I will copy it as it is.

Matrix, here we will remove this.

We can write this div; this div is transformed using matrix property.

Okay.

So, we will remove this as well.

Save, Matrix.html.

Initially without performing any operations, we are seeing it in this way.

Now, we will perform the Matrix over it one by one.

Let’s say I will 1st take; id, matrix1.

We will perform 1, with the values.

Here in the matrix, we will write transform, matrix, 1st comes scale, scale I am keeping as it is.

I don’t want to do any change in my scale.

So, let’s say 1, (comma) now comes skew X.

So, in X direction how many degrees we want.

Now, guys!

You must have seen that this time we had not given Skew in degrees this time, we had given it in values.

So, we wanted it in a negative direction.

So, we will take here -0.3, (comma) now, comes skew Y.

For example, I don’t want the skew in Y.

So, I will make it 0 here.

Now comes scale Y, 1, so that my division stays as it is.

So, we have not changed anything in scale.

We have kept scale X ;1 and scale Y also 1.

Our image will stay as it is, elements will be as it is.

Translate, let’s say I want to translate from one position to the other.

In that case I will take 150 in X direction and…initially let's say we don’t translate anything, we are not performing.

We don’t want to perform translate.

So, we will perform the skew only in a negative direction, save.

Okay.

So, you can see that performing the skew in a negative direction means, you can see that we are getting an angle in this direction.

If I remove it and write plus 0.3.

So, you can see that my direction changes.

Earlier it was like this, now I am getting it in this way.

So, this is showing our degree itself.

But we have changed direction.

So, by writing negative our direction changes.

So, here we learn that if positive is written, every time in horizontal X direction, clockwise direction the tilt will be performed, angles will be performed.

But if we write negative, we will get the angle in an anticlockwise direction.

Next, we will see, we will make it Matrix2.

With this id we will capture, #transform matrix.

Again, we will keep it as it is.

We don’t have to do any more changes here.

So, one we will keep as it is.

In the place of X direction, in Y direction, means in positive direction, we will tilt it for 0.5.

Scale we will keep it as one and we will move it till 150.

We will save it.

So, you can see that in the Y direction we are getting the curve means the angel is getting performed.

Movement from here to here, in the X direction, we are getting 150 pixels.

From here, it has moved here.

We have performed a simple transform with the matrix.

We have not added anything to the scale.

That is the reason.

If we write it in this way.

So, we will see it in this way.

 If I make this 0.5 negative.

This becomes anticlockwise instead of clockwise.

Okay.

So, this was our Matrix example, that we are using all the property together, when we are using Matrix.

So, this was our today’s segment, which was on the transform property.

We have seen almost all transform related properties, translate, X and Y direction, skew, X and Y direction, combined skew, scale, if we want to make the image big or small and Matrix, combination of all the transform related properties.

All this we have seen.

So, guys todays segment is very important, if we are working with any element’s transformation.

In that case.

So, I request you, practice all of the practicals of today, practice, check and perform it and see.

If you have any doubt in today’s segment.

You can tell us on forums.learnvern.com.

We would revert to all your questions with solutions over there.

Our next segment is on CSS 3D transforms.

Thank you.