Scaling isn't done in the prefered way

CodePen

When you hover the blue pill, it doesn’t get bigger in the correct direction but it aligns it vertically.

Why is happening and how to fix it?

scale(1) doesnt scale it since it is equal to the original size.

try adding this

.pill-1:hover {
 transform: rotate(45deg) scale(1.5);
}

you have both the rotating and scaling property and it was aligned correctly when i tried it with this.

1 Like

and try adding this to the .pill-1 class

transition: 2s linear;

it makes the transition smoother.

1 Like

What if I want to use @keyframes?

For example, I want to have a smooth reverted animation when my mouse isn’t on the element.

Now, when I remove the mouse from the element, it gets back to its place instantly. I don’t like that.

Unfortunately, I do not know how to do that. I am still learning css animations as well.