javascript - 不能同时在 X Y Z 轴上旋转

Question

function loop(){
  var XValue = $('#xval').val();
  var YValue = $('#yval').val();
  var ZValue = $('#zval').val();

  $('#cube').css({
    transform: 'rotateX('+XValue+'deg)',
    transform: 'rotateY('+YValue+'deg)',
    transform: 'rotateZ('+ZValue+'deg)',
  });

  setTimeout(loop,1);
}

loop();

我已经在 css 中制作了一个 3D 模型，但是我在使用 jquery 旋转它时遇到了问题。它只监听最后一个带有 transform 的命令。有什么建议吗？

Answer 1

对象中不能有重复的键。充其量，您只是要覆盖以前的值，而不是添加它。将您的旋转加入单个字符串。

$('#cube').css({
  transform: 'rotateX('+XValue+'deg) rotateY('+YValue+'deg) rotateZ('+ZValue+'deg)'
});