问题：下面两行代码在执行效果上有区别吗？

 transform:  translate(100px,100px) rotate(45deg);
 transform:  rotate(45deg) translate(100px,100px);

translate(X,Y)，可以使元素在x轴和y轴上平移。（在translate中，x轴右为正，但y轴下为正）

rotate(deg)，可以使元素旋转一定角度

在几何上分析，先平移后旋转，还是先旋转后平移是一样的。但在CSS中却并不是如此。我们先尝试运行一下：

在上面的代码中，我们先平移，后旋转。我们用红块表示原来的位置，发现蓝色块按照我们的想法，先向右下偏移后，进行了旋转。符合我们的预期。

我们再尝试一下先旋转后平移。

这时元素旋转是正常的，但位置却跑到了原先位置的正下方。

其实原因很简单，当元素旋转后，其自身的坐标轴也会旋转，这时元素在进行偏移时就不是正右正下，而是沿着旋转后的坐标轴。