Css transform без перезаписи предыдущего преобразования?

У меня есть элемент:

elem
   transform translateY(5px) scale(1.2)

Теперь на hover я хочу, чтобы он переместился на дополнительный 5px

elem:hover
   transform translateY(5px)

Очевидно, это перепишет предыдущее преобразование. Есть ли способ заставить его перемещать дополнительные 5, не зная, что такое предыдущее состояние преобразования?

Спасибо.

Ответ 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;
}

Ответ 2

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

http://jsfiddle.net/Cx9hH/

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

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

Ответ 3

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

Хотя, это будет довольно уродливо.

Ответ 4

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

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

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