css不会边旋转边平移

在CSS中，我们经常需要给一个元素进行旋转或平移的操作，使得页面更加生动有趣，增加用户的体验感。但是，有时我们会遇到一个问题，就是无法边旋转边平移，这该如何解决呢？

在CSS中，旋转和平移操作都可以通过transform属性来完成。我们可以通过transform: rotate(angle)来实现元素的旋转，通过transform: translate(x,y)来实现元素的平移。但是，当我们尝试同时使用这两个属性时，会发现元素只会先旋转，再平移，而不会边旋转边平移。

transform: rotate(angle) translate(x,y); 

造成这种现象的根本原因是，CSS中的transform属性是矩阵变换形式的，而矩阵变换是先乘后加的过程，也就是说，当我们对一个元素同时进行旋转和平移时，CSS会先通过矩阵变换计算出旋转后的坐标，然后再进行平移操作。这就导致了元素只会先旋转，再平移的问题。

那么要如何解决这个问题呢？其实很简单，我们只需要将旋转和平移操作分别写在两个单独的transform属性中，而不是写在同一个transform属性中即可。

transform: rotate(angle);
transform: translate(x,y); 

这样，旋转和平移操作就可以同时进行了，从而使得元素边旋转边平移，达到我们想要的效果。

总结起来，如果在CSS中想要边旋转边平移一个元素，我们需要将旋转和平移操作分别写在两个单独的transform属性中，这样才能同时进行旋转和平移操作，使得元素边旋转边平移达到我们想要的效果。