Webkit 转换，旋转后翻译

Question

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

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

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

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

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

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

Answer 1

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