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
Still not working.
X refers to the x-axis. If you want it to translate on the y-axis you need to specify that.
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.