Individual CSS Transform Functions

Dan Wilson documents a classic annoyance with transforms:

button {
transform: translateY(-150%);
}
button:hover {
/* will (perhaps unintentionally) override the original translate */
transform: scale(.8);
}

The native (and WET) solution is list the original transform again:

button:hover {
transform: translateY(-150%) scale(.8);
}

Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:

:root {
--tx: 150%;
--scale: 1;
}
button {
transform:
translateY(var(--tx))
scale(var(--scale));
}
…

Individual CSS Transform Functions is a post from CSS-Tricks