X軸で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を使用して回転させるのに問題があります。それは、変換を伴う最後のコマンドを聴くだけです。助言がありますか ？

Answer 1

オブジェクトにキーを重複させることはできません。せいぜい、以前の値を上書きして追加するだけではありません。回転を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キーの1を維持することができますto：

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

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