Reports

Using @Quentin's advice in comments, as a workaround I am able to make it work using translateY as an external property, instead of getting previous one from DomMatrix.

const box = document.querySelector('.box');
let id = undefined;
let translateY = 0;

function animateTest() {
  box.style.transform = `rotate(12deg) translateY(${translateY}px)`;
  translateY = translateY+2;
  id = requestAnimationFrame(() => animateTest());
}
id = requestAnimationFrame(() => animateTest());

let button = document.querySelector('.button');
button.addEventListener('click', function() {
  cancelAnimationFrame(id);
  translateY = 0;
  id = requestAnimationFrame(() => animateTest());
}, false);

setTimeout(()=> {cancelAnimationFrame(id)}, 5000);

.box {
  margin-left: 300px;
  width: 10px;
  height: 10px;
  background-color: black;
  transform: rotate(15deg);
}

<button class='button'>rerun</button>
<div class="box"></div>

79539688