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