killereks killereks - 1 month ago 9
jQuery Question

Cannot rotate on X Y Z axis at the same time

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();


I have made a 3D model inside css but i have problem rotating it using jquery. It only listens to the last command with transform in it. Any suggestions ?

Answer

You can't have duplicate keys in an object. At best, you're just going to overwrite the previous value, not add to it. Join your rotations into a single string.

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