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

Используйте объект WebKitCSSMatrix или MozCSSMatrix (я думаю ...), чтобы установить новые значения через исходный объект, не зная начального преобразования.

http://jsfiddle.net/Cx9hH/

В этом случае у меня естьначальный перевод 100px на ведьму, я добавляю дополнительные 100px:

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

Answer 3

CSS переменных! https://jsfiddle.net/91q0s5h0/4/

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

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

Answer 4

Вы можете использовать вложенные элементы и увеличивать перевод для каждого включения независимо для каждой переменной.

Хотя, это было бы ужасно быстро.