不覆盖之前的变换，如何使用CSS进行变换？

Question

我有一个元素：

elem
   transform translateY(5px) scale(1.2) 

现在当鼠标悬停时，我希望它向下移动额外的5像素。

elem:hover
   transform translateY(5px)

显然，这将覆盖先前的转换。有没有办法在不知道之前的转换状态的情况下将其设置为额外移动5个单位？

谢谢。

- Harry

---

有类似于#elem:hover { transform: add translateY(5px); }的东西会很酷。不幸的是，目前还不存在这样的东西。 - Tamás Bolvári

自Chrome 104以来，有单独的变换属性，例如scale: 1.5; rotate: 45deg; translate: -50%;等。但是，截至2023年3月17日，它们只在CanIUse上获得了88％的支持。 - Seangle

自从Chrome 104版本以来，存在着独立的变换属性，比如scale: 1.5; rotate: 45deg; translate: -50%;等等。但是截至2023年3月17日，它们在CanIUse网站上仅有88%的支持率。 - Seangle

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

- Ollie Williams

Answer 2

使用WebKitCSSMatrix对象或MozCSSMatrix（我认为...）通过原始对象设置新值，而无需知道初始变换。

在这种情况下，我有一个初始的translate值为100px，在其基础上再加上100px: http://jsfiddle.net/Cx9hH/

box.style.webkitTransform = matrix.translate(100, 0);

- Mircea

---

很好，这并不涵盖所有情况，但是因为有可能对某个人有用，所以点赞。 - Harry

Answer 3

你只需要创建另一个div或span包装器，并将transform属性设置给它就可以了。

- Oluwatowo Rosanwo

---

这并没有回答问题。一旦您获得足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Ghost Ops

@GhostOps，这是一个正经的答案，伙计。 - Mechanic

Answer 4

你可以使用嵌套元素，并针对每个变量独立增加翻译。

不过，这样很快就会变得混乱不堪。

- cwharris

Answer 5

CSS变量！https://jsfiddle.net/91q0s5h0/4/

div {
  --translateX: 10px;
  transform: translateX(var(--translateX)) scale(1.5);
}

div:hover {
  --translateX: 5px;
}

- Tyler

---

据我所知，这并不起作用，它将10px替换为5px而不是添加到它上面。 - Harry

此外，这些变量仍然是固定的，当通过JavaScript更改翻译时不会动态更改。 - Kokodoko