CSS3 rotate3d與兩個角度

Question

我正在旋轉基於鼠標位置的立方體。

鼠標在任何時候都在屏幕上有X座標和Y座標。

我正在使用jquery .mousemove（）來確定像素座標，然後在mousemove函數內部，我正在調整css rotate3d角度來移動對象。

這一切工作正常，但我想移動基於x和y位置的對象。理想情況下如此..

'-webkit-transform': 'rotate3d(1,0,0,'+angleX+'deg)', 
'-webkit-transform': 'rotate3d(0,1,0,'+angleY+'deg)', 

但這當然不起作用。

如何讓兩個軸同時旋轉不同的數量？

Answer 1

您可以合併變形。總和將被表示爲矩陣3d函數。不太確定你想達到什麼，在你的情況下，第二次轉換覆蓋第一次。你可以嘗試：

'-webkit-transform': 'rotate3d(1,0,0,'+angleX+'deg)' + 'rotate3d(0,1,0,'+angleY+'deg)' 

這也可以problably被表示爲只有一個，如果你捏捏[1,0,0]矢量/軸