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

【问题标题】：css transform without overwriting previous transform?css 转换而不覆盖以前的转换？
【发布时间】：2011-08-18 22:57:23
【问题描述】：

我有一个元素：

elem
   transform translateY(5px) scale(1.2)

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

elem:hover
   transform translateY(5px)

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

谢谢。

【问题讨论】：

拥有像#elem:hover { transform: add translateY(5px); } 这样的东西会很酷。不幸的是，这样的东西还不存在。

标签： css transform

【解决方案1】：

您只需创建另一个 div 或 span 包装器并将转换设置为该 intead

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案2】：

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;
}

最终所有浏览器都将支持单独设置转换属性的能力。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

据我所知这不起作用，它将 10px 替换为 5px 而不是添加到它上面。
另外，这些变量还是一成不变的，通过javascript改变翻译时不会动态改变。

【解决方案4】：

使用 WebKitCSSMatrix 对象或 MozCSSMatrix（我认为...）在不知道初始变换的情况下通过原始对象设置新值。

http://jsfiddle.net/Cx9hH/

在这种情况下，我有一个 100 像素的初始翻译，我添加了一个额外的 100 像素：

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

【讨论】：

很好，这并不涵盖所有情况，但 +upvote 可能对某人有用。

【解决方案5】：

您可以使用嵌套元素，并为每个变量增加相互依赖的翻译。

不过，这很快就会变得丑陋。

【讨论】：