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