Translate rotated element relative to document

I’m trying to translate a rotated element but when I do so, the element translates considering the rotated axis. I’m trying to translate the element considering the axis pre rotation. How do I do that?

I’ve created a jsfiddle to illustrate the issue : https://jsfiddle.net/c03wpyuz/6/

$(document).ready(() => {

  var tx = 0;
  var ty = 0;
  var ag = 0;
  var el = $('#test');

  setTimeout(() => {
       ag = 45;
       el.css('transform', 'rotate('+ag+'deg)');
  }, 1000);

  setTimeout(() => {
       tx = 100;
       ty = 0;
       el.css('transform', 'rotate('+ag+'deg) translate3d('+tx+'px, '+ty+'px, 0)');
  }, 2000);


});

The element will rotate after 1 second then after 2 seconds it will translate. The issue is that I’m only translating it over the X axis but the axis is then rotated.