Question

我有一个元素：

elem
   transform translateY(5px) scale(1.2)

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

elem:hover
   transform translateY(5px)

显然这会覆盖之前的转换。无论如何设置它移动另外5个而不知道前一个转换状态是什么？

感谢。

Answer 1

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

http://jsfiddle.net/Cx9hH/

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

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

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

Answer 3

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

虽然，这会很快变得丑陋。

Answer 4

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

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

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

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

4 个答案: