CSS3 rotate3d 有两个 Angular

Question

我正在根据鼠标位置旋转立方体。

鼠标在屏幕上随时都有一个X坐标和一个Y坐标。

我正在使用 jquery .mousemove() 来确定像素坐标，然后在 mousemove 函数内，我正在调整 css rotate3d Angular 以移动对象。

一切正常，但我想根据 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] 向量/轴，这也可能只表示为一个变换