Understanding 3D Transformation in CSS

Hello guys.

Welcome to our CSS series.

In our last segment we had seen CSS’s 2d transformation.

How we can transform our elements.

Translate, scale, rotate and matrix with the help of these methods.

Our today's segment is on 3d transformation.

Guys, in the last segment we had performed different practicals.

 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 today's segment is on 3d transforms, we will understand 3d transforms today one by one. 

First 3d transform that comes is the Rotate X method.

In 3d mainly we have got rotation methods only like rotate X, rotate Y and rotate Z and all these three rotational methods that we have, how do they work? Last time through the phone we had considered one example. (01:10) { Shows the phone, hold it in a way that the screen is facing you}

When we learn to transform, rotate, consider that this is my phone.

In this we have three axes available, on this side there is one axis for example x, on this side there is one more axis for example y. (01:22) { while saying this line, shows the axis}

So, for example, if this is x and this is y, so, this is a two dimensional.

If I convert this into three dimensions.

So, from here there is one more access that comes, which is available in this direction, which is coming out of my screen from this side. (01:44) { point your finger to the left corner of the phone and move in the 90 degree towards thescreen}

So, this is x,(01:51){ show x axis with respect to the phone } this is y,{ show y axis with respect to the phone }  and this is Z that is perpendicular, { show z axis with respect to the phone }  the perpendicular axis to x and y. {repeat showing z axis}

So, currently if you want to consider rotate, if you want to learn to rotate.

So, we will learn to rotate this device on all three of our axes. { keep holding the phone and show that you are talking about the phone}

For example, if this is the x axis (02:13) {show x axis again}  and if I rotate my device through the x axis.

So, my rotation will be considered in this way, that it is rotating through my x axis.(02:18 ) { rotate the phone and hold it in a way that the screen is facing the sky}

If to the same device I want to rotate it through my y axis.  (02:20) { show y axis while saying this}

So, it will be rotated somewhat in this way. { rotate the phone in such a way that the screen faces the camera}

Okay.

So, we have got two rotations available with us, one is on the x axis which will be rotated in this way and the other one on the Y axis which is rotating this way.

{show both the rotations}

Okay, so we have got two rotations available.

Now comes the third rotation, which is the Z axis rotation, in this line is our Z axis.{ say this showing the z axis}

If I want to rotate in this line, my phone will rotate in this way. (02 :55) { rotate the phone in z axis }

So, we have in total three different rotational methods.

First is the X axis,{ show the x axis rotation}  then is the Y axis, {show the y axis rotation} and the third one is the Z axis. { show the z axis rotation}

Now to all these three concepts the elements that we add through the HTML page, there we have to apply how in three directions, we will apply the rotations, how we can rotate the elements.

So first of all, our 3d rotation is Rotate X, Rotate X method, what is it used for? To rotate according to the x axis.

So, here there is a simple syntax of it, transform, Rotate X and then 150 degree.

So, now we want to practically perform this.

So, for that, we will first open the sublime text and in the sublime text, { Typing action while speaking }  HTML example, example Rotate X, okay, we will save this program.

So, this is our program. { typing action for 4 secs}

Now what do I have to do in this program?, I will simply add one division in this program, that is div now in this division, first of all we have to perform the rotation.{ typing action while speaking}

So, we will take a normal div like in the division we will write an id Rotate X.

This is a name that we will give to check in our division that transformation has been performed.

What will we do to check this? We will add one text, ‘this div is going to be rotated with x axis’, {type}  and we will save it.

Now you can see that our div has come, in the div we have to do a little bit of styling as well.

So, let's say style.

In style we will add, first of all we will make our div visible.

So, for the div we will take width 300 pixels, height 100 pixels, background colour let's say I want light green and I will also give a border to this division that is one px, solid, we will take red colour border, {type while saying} save.

So, this is our division in light green colour background, red colour border and in the direction that we have added this text that we will look at carefully, the text is started from this direction and added this way.

Now to this division.

We will rotate it through our ID, {Rotate X. (typing action)}

Now in this division what we will do first is {Transform Rotate X. (typing action}

Now, I want to get it as it is transformed.

Let's say I add 150 degrees, that it should get transformed at 150 degrees.

Okay.

So, I'm seeing it here upside down.

Why is this visible in this way?

So, for that what we will do is we will take this div, we will place this as it is, save, reload.{ typing action}

So, this is our original division and this is our transformed division.

And like I had explained to you using  this phone, if this is my phone, if I'm rotating on x axis means I am tilting it towards you. (07:00) { show axis taking the phone }

There will be a moment when this phone will rotate and will become flat, (07:10) { tilt the phone in such a way that the screen faces the sky} when it will be on the front side.

The current situation is this: if I rotate it 90 degrees on the x axis { say this while repeating the action} so you will see it in front view like a line.

When I start increasing it from 90, it will start looking somewhat in this way and you will see my phone in the front way. { tilt the in such a way that the screen faces the camera (down to up ) }

So, this is my 180.

So here there is zero-degree, 90-degree and 180 degree. (07:30) { show all the angles }

Then again, the line is visible, but it has been rotated towards my side. {  tilt the phone in such a way that the screen faces the ground, tilt it in the downward directions }

So, this is 270 degrees and again my phone comes in a normal position that is 360 degrees. {tilt the phone from downward direction in such a way that the screen faces you}

So again, I'm repeating. (07:45) { tilt it from from the upside, the screen will be facing the sky}

If I am keeping it in this way this is at a zero degree.

It is in its main position.

As and when I'm moving it towards your side, you can see that its height, this height that is there, is becoming a little smaller. { repeat the action}

You can see that this is its original height and as and when I'm moving it, it is becoming smaller.

So currently you will see it this much.

That is the reason my original height is this much, 100 pixels.

But the rotated division that I have got on the x axis.

Its height is smaller than this height because in the front view as and when my element is rotating, its height is slightly reduced, which we can see here as well.

Here the height is this much but on the front side you will see this much height.

It is getting small.

 And along with that it is at 150 degrees.

If we do the same thing at 180 degrees, you will see an exact replica of the above division.

So, you can see that it is also touching. {typing action}

If I make it 150 that means that my remaining portion is this one.

That's why my rotation is happening and the element is smaller in height.

This is through the x axis that is why whatever is written here is exactly opposite that you're able to read here.

T is getting inverted, h in the same position is inverted.

So, in this way this is showing up to us.

So, this is our division's rotation.

Now, the same program I will copy and paste it here and here it will come Y.

Here also Y as we will rotate it on the Y axis, here y and here also y.

Okay, so I will save it, rotate y .HTML {typing action} Now I will open it so this is my… this is my original division and this is after rotating.

Like I had explained on the phone.

If the x axis is rotating in this way, then Y will be rotated in this way.

So here the axis which is there, my rotation will be performed on the Y axis.

If my rotation is performed on y axis, I will get my text in a mirror image.

So, that’s why, here it is written that this div is going to be rotated.

Means what is written here, we are getting to read from here.

So, we are seeing the rotation performed in this way.

If I make it 180, I will exactly see the portion getting covered here.

Means full rotation is happening.

Currently this rotation is somewhat like this.{ show the phone rotation once again}

From here till here.

So, I am not getting a full conversion.

I will get my width to be small.

So, if I make it 150 again.

So, I am getting little margin from both the sides, that is because we will get slightly less view at 150 degrees.{ typing action while saying}

Now, main which is our Z axis in which it will rotate in a different way, (Pause) save, okay, so this is our output.

Like I had said, when we are on the Z axis…the axis that passes from here, within the camera. {shows the z axis with reference to phone}

In that way our rotation will be performed.

So, you can see here my rotation is performed.

So, it will rotate from here like this, till here. { refer the main video ay 11:38}

Again, in this way the rotation is performed.

That is why it is here.

So, on the Z axis how is the rotation that is happening.

So, this is through the Z axis transformation, in which we have performed the rotation.

So, we will come on our slide.

We have seen all the three rotations together.

1^st is the rotate X method; 2^nd is rotate Y method; same thing and the 3^rd is rotate Z method.

So, all three rotations that we have made and checked.

These were our 3D rotation, 3D transformation as we have to consider the X, Y and Z axis and perform the transformation.

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 topic is on Transition Delay.

Thank You.

(edited script )