css - 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] 向量/轴，这也可能仅表示为一个变换