Webkit 转换，旋转后翻译

Question

我一直致力于相当简单的 webkit 转换来创建（外行的）动画。我做得很好，除了一个问题，我还没有找到一些信息。如下：

描述：我有一个矩形 div，我使用 target.style.webkitTransform += 'rotateZ(90deg)' 旋转 90 度；这很好 - 我使用 target.style.webkitTransform += 'translate3d(50px, 0px, 0px)' 翻译它；

问题：当您旋转时，元素的轴也会旋转，如果您（例如）在 x 轴上平移，对象将沿新方向（元素面向的方向）移动，例如在上面的示例中向下 50 像素（旋转后）。

我需要一种方法来重新计算/重置轴（不改变旋转），以便动画对于外行来说是有意义的，即对于程序员来说，很容易看到对象面向不同的方向，但对于非技术人员离开的用户将永远保持离开。

要求：当用户说它在 x 轴上移动 50px 时，它应该在 x 轴上移动 50px（对于用户），而不管旋转或任何其他预先应用到它的变换。

进一步：我不会提前知道用户将如何操作对象，因此我不能采用固定值并解决它们，因此需要一个公式来重新计算/重置给定对象的样式属性和构造的所有内容进一步的转换。

Answer 1

如果您将translate() 附加到变换的末尾，那么它应该完全按照您指定的方式进行平移，而与之前的任何旋转无关。