Understanding Transformation and Resize Property in CSS

Hello guys.

Welcome to our CSS series.

In our last segment, we have covered CSS hyphen property.

If the word is very long, you can add hyphens in it.

We have checked it in the last segment.

Our today's topic is on CSS transform and resize property.

These are two different properties, first of all we'll see about CSS transform property.

The name of transform property is transform origin property as well because like it is written here.

This property is used to change the position of transformed elements.

So, what basically happens here is using transform, we have got two properties here.

One is transform and other is related to transform origin.

Our property transform, transforms our division or element, we can say.

When we transfer any element to any degree.

For example, we have a 360-degree circle.

When we generate a circle, its degree is 360.

If we take 90-degree, our element rotates at a 90-degree angle.

If we take 180, It rotates totally in the opposite direction.

So, with the help of transform, we can rotate our element but with the help of transform origin we can also provide position to it.

How we can position it in 2 dimensions or in three dimensions.

Means we can move it or we can adjust its position.

Like it is written here.

It is a point around which the transformation is applied.

Means what is transform origin basically.

So, for example, if I have some element for example, even if I talk about a physical thing.

Currently, I have my phone in my hand, if I consider one point on my phone.

For example if I consider this point, the centre point of my phone.

So, this phone is related to the centre point, in this way or in this way.

Means, on the x axis or on the y axis or on the z axis.

if you see in 3D, then in the z axis.

If I want to apply 2D transformation.

I will pass the values in the x or y axis.

We will come to the values later.

If I want to transform it into 2D, with only x or y axis, I will pass the values.

Even if I want to transform in 3D in the same position, like I have said here, if this is my phone, I'm tilting it a little bit.

I'm not totally tilting it.

I'm tilting slightly.

So, this transformation over the own origin, means on the same axis, this is my Z axis means 3D transformation.

On the current position itself rotating it.

If it is on the x axis, my phone will currently move horizontally.

If it is on the Y axis, my phone will move in the upward direction.

It will move on the Y axis.

So, this is my transformation property.

How we can transform in x axis, y axis and z axis.

How can I transform into the X, Y and Z axis? So, this is my basis related to transform origin property.

Like it is written here next, the transform origin property must be used with the transform property if we are using transform origin.

So, we have to mandatorily, compulsory use it with the transform property.

Means first we will use the transform property that is moving to the degree and thereafter we will use the transformer origin.

When we will perform it practically, it will be clearer.

The 2d transformation can change the x axis and y axis of the element, like I explained with the phone example that if you want to transform into a 2D element, it will transform it in our x and y axis.

What if we want to transform even in 3d? For that we will make use of the Z axis.

This property can be specified by using one, two or three values, definitely.

The first value which is there represents our x axis; the second value represents our y axis and the third value represents the z axis.

Third value can also work on 3d transformations and cannot be defined using percentage.

Means the values on the X and Y axis.

We can also define them in percentage but the third value which is there on the z axis, that we cannot define in percentage.

We will move ahead in this, here we have taken an example.

Syntax you can see, that syntax is transform origin.

X axis, y axis and z axis values.

So, we can apply three values over here.

For example, for 2d transformation, first like we saw here that it cannot be used without transform property.

So here is the example that we have taken, in that we are using transform property.

So with the help of transform, we will first rotate our element.

Second, we will use transform origin, in which we will pass a few values in percentage.

Here we have the options available.

We can give a percentage on x axis and y axis.

So, we have two values with us.

The first value which is there, represents the x axis.

Second value represents the y axis.

Next, you can see that there is 3d transformation written over here.

So, in 3d transformation, we have applied three values in case of 3d, in transform, not the Rotate function.

But we have used the rotate 3d function.

As soon as we rotate 35 degrees, our element starts rotating.

Not only 35 degrees, whichever values you will pass.

While using rotate 3d, we need more than one value.

And along with that we have also specified the degree and in the transform origin, we have passed three values.

You can see the x axis, y axis and then z axis.

So, like we have seen previously in the theory that z axis value cannot be passed in percentage.

So, x and y if we have taken 70 and 10% still, we have taken z in pixel means in length property.

Means we have not taken in percentage.

So, to perform this example first of all, we will use the Sublime Text.

Okay.

Example, Transformation Origin 2D, we will first of all see this program in 2d.

Okay.

So, what do we want for this? We will have to generate the divisions for this.

When we have to perform the transformation.

We should know, with respect to what our transformation is getting generated.

So, for that what I will do, first of all I will take one division.

To show the first transformation I will take two divisions.

So, first division we will take…in the division if you must have seen in the slide, what we have taken, transform origin 5% and 2% So, I will write the same thing in division, transform, origin, 5%, 2% So, we have passed the values.

So, we have an idea.

This is showing 5%, 2% values.

With this div, we will 1st give styling to this div.

For styling of the div, let's say we will take the div's height.

Let’s say we will take 100 pixels, we will take the width 400 pixels.

We have to show the border, so that we get an idea that this is our division, this is one division.

For that 5 pixels, solid, let's say we take the blue border.

The font that is there in it, the font we will take as 20 pixels.

We will run this program.

Okay.

So, you can see that our program is running here.

Okay.

So, here you can see we have taken the border and what we had written here, we are getting the same text.

Since we have in total two divisions, one will identify us, what should be the actual position and the other division will rotate and show us.

The first division that we have to give, should be the 1st division.

I will give it one class.

For example, outer.

And to this outer, I will give some background property, let’s say I will take, background colour, I will take light green.

Margin we will take 100 pixels.

This is my division that has come, a light green colour in the background.

And we have taken some margin of 100 pixels.

So, from top and left, we're getting a 100-pixel margin.

Along with it I will generate one more div, div.

And I will name this div “box”.

That's it.

I don't want to add anything else to this.

One division, okay.

And I will move this division inside this.

Now you can see that there is one main division, and this is another division.

This division we have taken inside.

If you see in the core.

Main is outer and second there is box

division inside it.

So, our division is starting from here.

It is starting from here as we have taken text.

Let's say if I reduce the text size.

Okay.

So, this is my text and this is my division which has almost moved here.

So, if I remove the text, my division will start from here, from where the T starts.

The text is looking too small to us.

We will keep it 20 itself.

Okay.

So, this is our font and this is our other division.

If this division is in this way.

When we're keeping it flat, horizontally, we are getting it in this way, with a background colour, light green.

Now, we will take another division and we will perform a rotationṣ.

Let's say we will take another pattern in another division.

We want to add some patterns.

So, this is our outer and this is the box.

I will add background inside the box.

Background, url, let’s say I will pass an image into it.

We have an image called pattern 1.

This image is in images named folder, reload.

Okay, so this is our pattern.

So, this is our division that will be in green colour.

There is another division in which we have added the pattern, so that while performing the rotation we get an idea.

Now, I will transform this box.

So, Transform, Rotate 35 degrees Okay.

As soon as I rotated it, the division on our side rotated on 35 degrees.

Let's say if I rotate it at 90 degrees, okay, so it rotates 90 degrees.

We have to give it some moment on the X axis.

I will make a margin of 200.

Okay, so we are getting this div totally.

Now I will do one thing, the transform property that we have given, along with that transform origin, which is our topic today.

I will give that property.

So, here we have taken transform origin 5% and 2%.

First of all, we will give 5%, save and reload.

So, you can see that when I gave the moment on the x axis, the box that was here got moved and came to the downward side.

So, what is happening here on the x axis my moment is showing 5%.

So, from here to here, my box is moving at 5%.

Along with moving in this direction, it is moving in this direction as well.

So, it moved from here and came here.

Along with this 5%, if I give some moment even to the y axis.

So, I am getting it in this type.

It is 2% in y axis.

For example, if I will take 1%.

So, you can see that there is this much movement that is happening.

So, basically my box which is there, box division.

It is moving from here and coming in this direction.

I will make it 35 degrees again.

Okay.

So, what was there earlier?

If you're considering a centre point here, according to the centre point.

First of all, my box will move.

Like I had shown through the phone as well.

When my box was in this way, my box.

It has been rotating in this way.

When I took 35, it rotated in this way.

But according to my centre it will rotate.

When we apply the transform property it will move on the x axis and then on the y axis.

So, when we talk about the x axis.

We talk about horizontally.

But exactly horizontal movement is not getting performed over here.

I have given 5%, x axis.

So, my box is coming a little below.

The X axis is considered vertical over here.

So you can see that it is moving from here and coming here.

Now, in y I am giving 2%.

 So, it has moved on the left side.

So, here x axis and y axis, it is considered in this way.

X is taking vertical and y is taking horizontal.

Currently we have considered the values in percentage.

Let's take one more example.

Same, this time we will pass the values in pixels.

Let's say 100 pixels and 200 pixels.

This is a transformation that we will define.

Here we have already taken the outer class.

So, this time I will name it outer one and box one.

Outer 1, let’s say we will 1st of all save it, we will reload it.

So, we are getting both here.

For example, I will give the margin, 500 pixels.

And I will give the background colour light green.

Okay.

So, we are getting this in this way.

500 is more here, we will make it 300.

Okay.

So, here we are getting 2nd, outer 1 division.

Outer 1 is done now we will play with box 1.

So, we will apply the same properties.

So, copy and paste.

Instead of pattern one we will take pattern two.

We will rotate it, earlier we are taken on 35 degrees.

Now, we will take on 45 degrees.

Now, values are 100 pixels and 200 pixels.

Earlier we had passed the values in percentage.

Now we will pass it in Pixels, 100 pixels and 200 pixels, reload.

Now you can see that the second box has transformed to 45 degrees.

Okay.

So, you can see that this has been transformed to 45 degrees.

But this is 35 and this is 45.

Now I will 1st of all give a 100-pixel value in x axis.

So, it has moved down 100 pixels.

You can see in this direction below.

Now in the y axis I will give 200 pixels.

So, on the y axis, 200 pixels.

Positive on the positive side.

Means in this direction we are getting to see 200 pixels moment.

This is when we pass the values in pixels.

The 45 degrees transformation we have performed.

Second, we have given 100 to 200 pixels a moment.

How we can perform transform using pixels values as well as percentage values.

So, here  whenever you want to show up any division in your desired direction, not only horizontally.

If in any desired direction in this way, you can get that kind of appearance on your web page.

In this program the default zoom it a little.

Now in this we have to apply 3d transformation, like in the 3d transformation we have to use rotate 3d.

First of all we will remove this.

It should transform, rotate 3d.

What does rotate 3d indicates, it indicates that we will perform the rotation together.

So, let's say that the 1st value is x.

So, on the x axis, I want to rotate it by 3 points.

Second is y, so let's say I take two.

For example, I will take 1, and I want to rotate, 75 degrees, 75.

So we will save this first of all okay, so you can see that my second division that is there, my box division, we can see that it has been rotated in 3d.

I will again take the example of the phone.

My current phone, it has been rotated x and y direction.

But along with that, in this way, in the front side, I am rotating it.

So, it has performed the rotation even in the Z direction.

So, this was about the z axis.

On this we would apply the transform origin property.

So, on doing transform origin, the first 2 values we have given in percentage.

Like it is there in the slide, 70 and 10.

Thereafter 150, which we have given in points.

So, let’s say I apply 70% first.

So, this is my moment on the x axis.

Then after that I will apply 10% on y axis.

And thereafter we will apply the transformation of 150 pixels.

So, this movement is happening in the z axis.

70, 10, okay.

This is our transform origin property in which we have performed the transformation in this z axis.

First of all, we performed the rotation and then in all three axes, we moved our box.

This is how we can perform using 3d transformation.

Now we have keywords available with us like top, bottom, left, right.

So, for that same thing, we will copy this.

Okay

Now in the outer one here the same thing we will copy and we will take 400 or 350 pixels.

Okay.

 And the box that we have, that we will copy and keep it here but we will give the box the name box one as we have box one name here, pattern 2.

Same transformation we have performed over here but we will be using keywords over here, like first of all I want that on the x axis it should transform from the bottom and on the y axis I want that it should move to the right-hand side.

And after that on the z axis we will keep the same values.

Means the value on z goes in length.

So, we are passing 200 here.

So, you can see that our movement has been performed, x has taken bottom, so bottom side, it has also taken right so right side on y axis.

And on the z axis we have performed 200 pixels of transform origin.

These values related to transform you can see here.

Transform property defines how we can rotate related to the origin and we can even transform it.

This we have performed with all 3, x, y and z axis.

So, 1st we had seen transform 2 dimensionally and 2nd we had seen 3 dimensionally.

We have got both the examples available here with us here.

First is the 2 dimensional transformation and 2nd is 3 dimensional transformation.

Next we will go ahead.

Next is our resize transformation.

The basic meaning of the resize property is how we can resize an element.

If we are taking a div, how can we resize the div.

If we give any text area, how we can resize that.

Resize basically makes resize property available to us.

Like it is written here, resize, when we use resize property with that there are 4 values that come None, Horizontal, Vertical, Both.

These are there because.

We are performing the resize in which direction.

Are we performing resizing horizontally?

If we take the resize horizontally, then resize will not be possible vertically, it will be possible only in horizontal direction.

If we are giving vertical then horizontal will not be possible and it will be only vertical.

If we are taking both, resize will be possible in all directions.

And none means we are not allowing the resize.

Like it is written over here.

The CSS allows the user to control the resizing of an element just by clicking or dragging the bottom right corner of the element.

Means the bottom most right corner which would be there, there we have an indication that this element is resizable.

So, through that we can perform the Resize.

Then here, to control the resize of an element, we have to set the overflow other than visible links.

Means we can set the properties like overflow hidden or overflow scroll.

So that when we resize, the content that we have means the inner content of the element, if it is getting overflown.

We should either have a scroll available to see that or that the content should be hidden.

So that the overflow, the design of the page should not spoil it, basically we can say that.

With the help of overflow our web page should not look bad.

So, we will define the overflow property.

If we are resizing it.

In this like we said, none, horizontal, vertical and both.

These four values are available with us.

None means no resizable, horizontal means horizontally, vertical means vertically and both means in both directions.

So, we will perform this example.

So, for that we will generate one program, example, resize, save, resize.HTML.

In this first of all we will take one division, in this division we will take a P tag.

In that we will take a div.

In that we will take, this is the div and again we will take one div.

To check the resizable property, click and drag the rightmost bottom icon.

So, here you can see the size, our program.

So, here comes our div and text.

So, for this we will also have to give some styling to the div.

So, that we can see properly.

So, let's say we will take a div, style, div.

In that we will perform some styling like we will take the border, 2 pixel, solid black and then we will also have to format the text a little.

So, let's say we will take the padding of  20 pixels, font size, we will take 20 pixels, background colour, light green, then we will take 500 pixels width or we can even take 300 pixels.

Like we had seen in the slide.

When we resize, our overflow should be defined.

So, we write overflow property here.

For now, we will comment it.

Okay so we have got the division.

This is a division.

This is a heading, this is the div.

And it is written here to check the resizable property.

We have not given the resizable property till now but we will give it.

So far the resize first of all here will come resize.

So, the first value was none.

So, if I give none and reload.

Here I'm not getting any icons.

With the help of which I can drag and drop it.

What if I remove none and give it horizontal here.

Save and reload.

You can see that we are not getting icons.

So, this is an indication that with the resize we have to mandatorily use overflow property.

We just have to use overflow property.

Let's say that I uncomment the overflow property and give auto.

I save it and reload it over here.

You can see that I am getting 2 lines over here.

With the help of this, you can see that I am able to horizontally scroll it.

So, this is my resize in horizontal direction.

I am not able to drag it vertically because we have given it

a horizontal property here.

Now we will give one class to this div, class, resize, horizontal, copy.

We will write our resize property over here.

Save, reload.

We will repeat the same thing over here.

Below, this time we will take, vertical in place of horizontal.

So, this is our class and we have written here resize horizontally, in that place we will write

vertically.

Reload.

Break statement.

Okay.

here there is another div.

You can see that I am able to scroll it vertically.

As soon as I am vertically scrolling it, you can see that we are getting a scroll bar here, it indicates that the content here, inside content to view that I can take help of the scroll bar.

Reload.

I am getting my entire content here.

Since there is no space below you can see that it is not

getting scrolled property.

That is why we are giving it margin, so we have given the margin here.

So, you can see that I can probably scroll it.

When I am scrolling in an upward direction the content is less visible.

At that time I am getting a scroll as we have given an overflow auto.

Auto means according to the need the browser defines whether we have to give the scroll or not.

When I reduce the size.

In that case I'm getting the scroll.

Otherwise, when I come down, you can see that enough space is available.

When there is enough space available the scroll gets removed.

 That is because of the overflow auto property.

The decision is automatically taken whether to give the scroll or not.

I will copy the same thing again.

And this time we will resize both.

This time we will resize both.

Reload.

So here you can see that my third division has started from way below.

Since we have given the margin.

Here when I have taken both horizontal, vertical and cross direction.

You can see that the one that is vertical doesn’t move horizontally, it only moves vertically and the one with horizontal one will only move horizontally and not vertically.

My last division moves in all directions.

Based on that I am even getting the scroll bar.

So, this is our resize property.

The first one is a horizontal scroll.

we will take an h3 tag over it.

Example of horizontal resize copy, vertical resize.

Okay.

So, we have got the headings.

So that our programs are clearly identified.

So, this was our Resize property.

How we can resize our elements.

Guys, in today's segment we saw transform origin property, resize property, in transform we saw how we transform, even that we have seen.

So, guys, today’s topic was an advanced level topic.

So, it is very important to understand how we can rotate the elements, transform them.

You will be able to identify and understand it more only after conducting the practical.

You will understand how all these properties actually work.

So, I request that whatever we have learned today, you practice it on your own.

You will be able to be strong in this segment, only after performing the practical.

If you have any queries or comments, click the discussion button below the video and post there.

This way, you will be able to connect to fellow learners and discuss the course.

Also, Our Team will try to rectify your issues at the earliest and revert to you.

Our next segment is on CSS transform property.

Thank you.