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)'
});

Answer 2

transform style允许同时提供多个转换（请注意以下示例/* Multiple function values */）。

你也可以在JavaScript中使用它：

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

按原样，传递给.css()的对象只能保留您尝试提供的3个transform个密钥中的一个，其结果类似于：

var transform;
transform = 'rotateX('+XValue+'deg)';
transform = 'rotateY('+YValue+'deg)'; // rotateX is discarded
transform = 'rotateZ('+ZValue+'deg)'; // rotateY is discarded

$('#cube').css({
  transform: transform
});

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

2 个答案: