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()附加到变换的末尾，那么它应该完全按照您指定的内容进行翻译，而与以前的任何旋转无关。