[分享]css先旋转在位移

在CSS中，旋转和位移是常用的样式操作，但它们的顺序是非常重要的，如果顺序不正确，可能会导致不预期的结果。一般来说，应该先旋转元素，再进行位移操作。因为，如果先进行位移操作，元素的位置会发生变化，旋转...

在CSS中，旋转和位移是常用的样式操作，但它们的顺序是非常重要的，如果顺序不正确，可能会导致不预期的结果。

一般来说，应该先旋转元素，再进行位移操作。因为，如果先进行位移操作，元素的位置会发生变化，旋转时会以新的位置为中心进行旋转，可能会导致旋转效果失真。

下面是一个例子，首先我们给一个元素设置旋转样式：

.transform {
  transform: rotate(45deg);
} 

然后我们再给它设置位移样式：

.transform {
  transform: rotate(45deg) translateX(50px);
} 

在这个例子中，我们先对元素进行了旋转，再对它进行了50像素的水平位移。如果我们颠倒这两个样式的顺序：

.transform {
  transform: translateX(50px) rotate(45deg);
} 

那么，旋转的中心就不是元素本身的中心，而是它的新位置，导致旋转效果失真。因此，正确的顺序是先旋转，再进行位移操作。