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

Answer 2

你可能使用嵌套的元素，并增加每个变量上的每个变量的相互独立的翻译。

虽然这会变得很难看。

Answer 3

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

http://jsfiddle.net/Cx9hH/

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

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

Answer 4

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

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

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