I guess next up, we're going to learn about transitions plus transformations and what I'm what I mean
by transformations, actually a couple of things.
We can transform McWane.
You can see you can rotate.
We can translate.
And we can also scale in excess.
So let's take a look at this.
Let's go back to our success.
And let's start by targeting AA2 with a class of transformation, they don't need the transformation.
I believe I did transformation, Dario.
Let's go back into access and target that class.
Now, again, I'm going to specify swith and its height with 100 pixels.
And I'm going to give you the background color of well and talk back on call this time.
So let's first of all, transition with what?
Two seconds and height, also two seconds.
Wanted to be equal.
And also the transformation.
So Transform will also take two seconds.
Now, let's go it in here and let me actually target or div with a.
So when we hover over it.
Let's, first of all, transform our way tonight.
So let's go with start with with 300 pixels.
And the height of 300 pixels, and as soon as we do this, we take a look here, not here and not one.
Well, we have our normal transformation with 300 and 300 pixels.
Now let's do a rotation and for the rotation, we're going to see transform.
And it should transform by rotating now we can rotate on specific axis Y, X and Z A Fredi rotation,
we go with a normal rotation and let's say one hundred eighty degrees.
We have the specified degrees so the units for rotating something is degrees.
So let's take a look at this.
And D'Arrigo.
Now, we could also do terms so we can't this and instead of one hundred eighty degrees, we're going
to take 180 and go into tiepin turn.
OK, and what this will do, it may show you this.
OK, now, OK, it's safe and at the and I'll go back.
So that's how it is a bit of the difference because it's trying to make.
One turn and also scaling up to 300 pixels.
Now, if I do multiple turns, make sure this actually is go to five.
This will increase the speed if I hover over it.
OK, so these are complete turns till it reaches it's actually in those two seconds that it will turn
five times within two seconds within change to the transformation.
OK, definition speed.
It's the same, so it won't take any longer.
So within the same amount of time, it needs to turn five times.
That is why the speed is so immense.
If I would change this back to one and also forget to save.
How Mazlo?
Now, next up, we're going to a scale so we can scale, first of all, down.
Transform and scale, and we'll scale it down by twenty one point zero point one.
This just means I'm going to scale it to 10 percent of its initial size.
So as soon as this hover over it.
There we go to scale down to 10 percent.
Now, we can also scale it up to combat this and.
Let's go with one point, too, which is actually 120 percent a key, so let's go here a word then whoa,
because it scales to 20 percent from its initial 100 percent at 100 percent.
It should be three hundred three hundred pixels and we add an extra 20 percent to it.
I came the last one I want to show you is a translation.
The translation I actually translated with it translate in sense of in a specific direction, so let's
type in transform, then translate and we will first of all translate on an x axis, let's say 120 pixels.
So it grows, but also in the same time goes to the right on x axis, like also push it down by targeting
the Perdis and but I need to comment this one out the show why?
And capital y this is not translate on the Y axis.
OK, and if I leave them both in, then it will translate on both axes, actually overrides the other
one.
So what we need to do is take out the translate direction from.
The first one.
So we only have translate and now if I leave only one word value within it, then it will translate
on both axes with the 120 pixels, so.
It actually doesn't work anymore that way, so we need to put in two values.
OK, and this just translates for both X and Y axis, one hundred twenty pixels.
We could also do percentage.
I could do I say 50 percent.
And this should also work.
It's from its initial position, it will go plus 50 percent to which action on the wider action so downwards.
OK, guys, so that's pretty much it for translation and trends formations, so in the next one.