css 转换而不覆盖以前的转换？

Question

我有一个元素:

elem
   transform translateY(5px) scale(1.2) 

现在悬停时我希望它再向下移动 5px

elem:hover
   transform translateY(5px)

显然这会覆盖之前的转换。有没有办法设置它在不知道之前的转换状态是什么的情况下再移动 5？

谢谢。

Answer 1

CSS 自定义属性又名 CSS 变量是唯一的答案(除了使用 Javascript)。

添加到以前的值:

div {
  --translateX: 140;
  --trans: calc(var(--translateX) * 1px);
  transform: translateX(var(--trans)) scale(1.5);
}

div:hover {
  
 --translatemore: calc(var(--translateX) + 25);
 --trans: calc(var(--translatemore) * 1px);
}

div {
  transition: .2s transform;
  width: 50px;
  height: 50px;
  background: salmon;
}

所有浏览器现在都支持单独设置转换属性的功能。

• https://caniuse.com/mdn-css_properties_translate
• https://caniuse.com/mdn-css_properties_scale