Individuelle CSS-Transformationsfunktionen

Dan Wilson dokumentiert eine klassische Ärgernis mit Transforms

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

Die native (und WET) Lösung ist, den ursprünglichen Transform erneut aufzulisten

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

Dans Trick ist es, stattdessen benutzerdefinierte Eigenschaften zu verwenden. Legen Sie sie alle sofort auf dem Element fest und setzen Sie sie dann im :hover -Zustand neu

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

Kaskadierende benutzerdefinierte Eigenschaften FTW.

Direkter Link →