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

Cannot rotate on X Y Z axis at the same time

本文关键字：旋转 不能      更新时间：2023-09-26
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();

我已经做了一个3D模型内css，但我有问题旋转它使用jquery。它只监听最后一个包含transform的命令。有什么建议吗?

一个对象中不能有重复的键。在最好的情况下，您只是要覆盖前一个值，而不是添加它。把你的旋转组合成一个字符串

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

transform样式允许同时提供多个转换(注意下面的/* Multiple function values */示例)。

你也可以在JavaScript中使用:

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

这样，传递给.css()的对象只能保留您试图提供的3个transform键中的1个，结果类似于:

var transform;
transform = 'rotateX('+XValue+'deg)';
transform = 'rotateY('+YValue+'deg)'; // rotateX is discarded
transform = 'rotateZ('+ZValue+'deg)'; // rotateY is discarded
$('#cube').css({
  transform: transform
});
相关文章：