We are now leaving the world of variables
and dive into another
new CSS concept,
CSS transformations, and transitions.
Now we'll first have a look at the fury here to see what
these topics are all about.
And then we'll implement these new concepts into our
existing project.
So what are transformations and transitions?
Well,
a transformation is moving or changing the appearance of an
element. For example, when hovering over it,
an example in our project could be our card container here.
So whenever we hover over this container at the moment,
we have a default hover effect,
changing the background color for example of the button.
But we could also say that if we hover over this entire
container, so here or there, or anywhere on this container,
then it should increase its size by 10, 20, 40,
whatever percent.
This could be achieved by a so-called transformation.
Besides the transformation,
we also have the transition though,
the transition then make sure that we have a smooth
transition from the initial.
So the initial size of our card container in our case to the
transformed state, so to the bigger card size so to say.
From a code perspective,
we'll first have a look at how we can implement a
transformation. So for example, this size increase,
and then a step two,
we'll dive into transitions and how these can be connected
to the actual transformation.
From a code perspective to transformation would look like
this.
Here we have the transform property, that's the property
we need to implement such a transformation.
And we would add this property to the state of the element
that initiates the transformation that triggers the event.
So to say,
which in our case would be hovering over the card container.
This means in the hover pseudo selector,
we add the transform property and then we have different
values we can add to this transform property.
In the example here,
we added the scale value with a factor of
two in parenthesis.This simply means that the scale,
so the size of this element would double. So practically
this would mean you have the initial size in this case of
this book. And once you hover over this book,
then the size would double.
This can be achieved with this transformed property.
Let's have a look at this in practice now. And for this,
we go back to the project.
And as I said,
I want to double the size of the card container.
Once we hover over it, therefore in our code,
in our CSS file,
we go down a bit below our card container class selector,
because as I said,
we won't add the transform property to the element itself,
but to the state of the element that triggers the
transformation. And in our case here,
this transformation should occur
once we hover over our card container and therefore we have
to go with our cards container class once again,
but now at the hover pseudo selector.
With this, we can now add to transform property.
As we saw it,
we use transform and now a colon.
It's a normal property just as any other properties we
learned about in this course so far.
But now here we could add the scale value and there we could
use a factor of two for example.
As I said, this will double the size of the entire element.
By saving this and going back to our project,
and now hovering over the
card, you see that if I zoom out a bit,
maybe to 100%
that yeah, this works, but this is way too big.
Therefore, what we can do now is we can go back,
and instead of this doubling, so instead of this,
100% will increase in size,
we could just go for one.one zero.
So this would be a 10% size increase,
scale one would be, well,
keep the existing size one.one zero would be a 10% size
increase one.two zero 20% and so on.
So we'll go with one.two zero or one.two,
both is working of course, and with this in place.
And by going back,
you'll see that now this effect looks a lot better,
but actually it's still too big.
So I'll actually go down even further to just a very slight
change of maybe 5%.
So let's add this value now and going back again,
you'll see now this looks fine.
By the way, transform is not limited to scale, of course,
attached to this lecture
you can find dedicated information about the transform
property and which values you can apply.
Just to give you one other example here,
let's go back to the code once again, and instead of scale,
I can delete this.
We cannot, for example, at the rotate value,
this one here,
and now we could add 180 DEG
so 180 degrees.
And as you can imagine with this in place,
if we go back and hover over the card, well,
it rotates by 180%.
Once we hovered over it,
not the effect we need for our project though. Therefore,
let's go back and let's add our scale value once again.
So we had scale of one.zero five,
I guess so 5%. So let's go back. Yeah. Now this looks good.
So this is part one to make our page well, a bit more fancy.
So to say, but besides our transformation,
we also saw this transitions concept on the slide.
Let's explore transitions now as a next step.