Push the capsules down

This is my CodePen.

I’ve used translateX(-0.5rem) so that when I hover they go up. When I click the capsules, I want them to go down a bit. I thought that if I put translateX(-a smaller number) it would do the trick but no.

Can someone help me —without JS —?

Negative numbers go one way, positive numbers go the other way

Screenshot 2021-01-24 111815

Still not working.

X refers to the x-axis. If you want it to translate on the y-axis you need to specify that.

Screenshot 2021-01-24 113329

Still not working. I also changed the translateX of the second value but did not fix the problem.

I was able to get it working. I just made your current code positive like suggested.

You currently have the rotate at 90 deg and translateX.