功能/按钮在iOS上不起作用，但在其他地方可以

Question

我有4个onclick按钮，它们可以在左右方向上上下移动图像，同时保持由rotateFoo函数设置的当前旋转。

它们在台式机上运行良好，在Android上运行正常，但在iOS上却无任何作用。作为参考，使用rotateFoo的按钮可以在iOS上正常工作，但是会重置“翻译”。

我尝试过重新格式化功能并尝试格式化类似于rotateFoo的功能，但是我无法使它们正常工作。有任何见解吗？

function rotateFoo() {
  var angle = ($('.card svg image:first-of-type').data('angle') + 90) || 90;
  //$('.card svg image:first-of-type').css({'transform-origin': 'center','transform': 'rotate(' + angle + 'deg) translate(-50%,-50%)'});
  //$('.card svg image:first-of-type').css({'transform': 'rotate(' + angle + 'deg)'});
  $('.card svg image:first-of-type').css({
    'transform-origin': 'center',
    'transform': 'rotate(' + angle + 'deg)'
  });
  $('.card svg image:first-of-type').data('angle', angle);
  $('.move_btns').css({
    'transform': 'rotate(' + angle + 'deg)'
  });
  $('.move_btns').data('angle', angle);

}

function moveupFoo() {
  var up = 0;
  up += -2;
  var upString = 'translateY(' + up + 'px)';
  var current = $('.card svg image:first-of-type').css('transform');
  $('.card svg image:first-of-type').css('transform', current + upString);
}

function movedownFoo() {
  var down = 0;
  down += 2;
  var downString = 'translateY(' + down + 'px)';
  var current = $('.card svg image:first-of-type').css('transform');
  $('.card svg image:first-of-type').css('transform', current + downString);
}

function moveleftFoo() {
  var left = 0;
  left += -2;
  var leftString = 'translateX(' + left + 'px)';
  var current = $('.card svg image:first-of-type').css('transform');
  $('.card svg image:first-of-type').css('transform', current + leftString);
}

function moverightFoo() {
  var right = 0;
  right += 2;
  var rightString = 'translateX(' + right + 'px)';
  var current = $('.card svg image:first-of-type').css('transform');
  $('.card svg image:first-of-type').css('transform', current + rightString);
}