Html CSS转换：一个转换属性，而不是另一个

我现在遇到了一个问题。我有一个元素可以在屏幕上拖动。当我切换方向（左或右）时，我将它倾斜到它前进的方向（给它一种重力感）

为了使倾斜平滑，我对其应用了以下css：

transition: all linear 50ms;

然后，我只需切换transform属性以向左或向右旋转它，方法如下：

transform: rotate(3deg) translateX(<x under mouse>px) translateY(<y under mouse>px);

变换：旋转（3deg）translateX（px）translateY（px）；

问题是，我希望在旋转上进行转换，但不希望在translateX或translateY上进行转换。这会使translateX/translateY看起来起伏不平

---

转换属性的一部分可以转换，而另一部分不能转换吗？或者我应该使用

top

和

left

属性设置X/Y吗？

不是理想的解决方案（从纯粹主义者的角度看），但您是否考虑过将元素包装在另一个元素中，并将转换应用于该元素？

这是一个非常聪明的答案！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！我将尝试一下。有趣的是，最简单的答案是最好的答案。仍然会对纯粹的解决方案感兴趣，只是为了获得知识：）而不是将其包装在标记中，但稍后将使用JavaScript或者做一些CSS解析巫毒。我使用了旧的危险策略不过，说真的，这是一个答案。只是作为一个问题。请随意建议编辑。对于“纯粹主义者”，我认为这是即将发布的Web动画API规范的一个用例。有关详细信息，请参阅。