考虑使用transform:translate实现左右偏移效果

或许在开发中都习惯与使用margin,padding来实现左右偏移的效果，其实也能使用transform中的translateX,translateY,等等来实现。我们看看两者差异

1. 性能差异

• transform: translate()：使用transform属性进行平移（translate）时，浏览器会优化这种变换，因为它不会触发页面的重排（reflow）和重绘（repaint），而是只在合成层（compositing layer）上进行变换。这通常意味着更高的性能，特别是在复杂的布局和动画中。还可以利用GPU进行加速渲染。

• margin和padding：改变元素的margin或padding会改变其布局空间，这可能会影响到周围的元素，导致浏览器需要重新计算布局（reflow），然后再重新绘制（repaint）相关部分。这个过程通常比仅在合成层上进行变换要慢。

2. 布局影响

• transform: translate()：通过transform进行的位置变换，不会改变元素在文档流中的实际位置或大小，它仅仅是在视觉上进行了偏移。这意味着元素仍然占据其原始的空间，可能会影响周围元素的布局，但不会影响基于其原始位置的布局计算（如使用position: absolute时，其定位参考点是变换前的位置）。

• margin和padding：margin和padding直接影响了元素在文档流中的布局空间。增加margin会推开周围的元素，而增加padding会增加元素的内容区大小，但不影响其外部空间。

利用这些性质大概率得出动画时使用transform更好，但是其实也能在平常中尝试使用，这样的话在布局时候碰到样式挤压之类的问题是就不需要调来调去省下不少功夫。