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

您可以组合变换.总和将表示为matrix3d函数.不确定你想要实现什么,在你的情况下,第二次转换会覆盖第一次转换.你可以尝试:

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

如果你调整[1,0,0]向量/轴,这也可能只表示为一个变换