单个 CSS Transform 函数 | CSS-Tricks

Dan Wilson 记录了使用 transform 的一个经典烦恼

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

原生（且 WET）的解决方案是再次列出原始 transform

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

Dan 的技巧是使用自定义属性。在元素的最前面设置所有属性，然后在 :hover 状态下重新设置它们

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

级联自定义属性 FTW。

直接链接 →