transform:translate

transform:translate()是CSS3中的一个属性，用于移动元素的位置。它可以接受一个或两个参数，分别表示元素在水平方向和垂直方向上的移动距离。如果只有一个参数，则表示元素在水平方向上的移动距离，垂直方向上不移动。如果有两个参数，则第一个参数表示元素在水平方向上的移动距离，第二个参数表示元素在垂直方向上的移动距离。例如：

transform: translate(50px);
transform: translate(50px, 100px);

使用transform:translate()偏移会使图片或文字变得模糊，而且还会使图片或文字失帧。为了解决这个问题，可以使用calc()函数。例如：

transform: translate(calc(-50% + 1px));

这个代码将元素向左移动50%，然后再向右移动1像素，从而避免了模糊和失帧的问题。

另外，如果需要在三个方向上移动元素，可以使用translate3d()属性。它可以接受三个参数，分别表示元素在X、Y、Z三个方向上的移动距离。例如：

transform: translate3d(50px, 100px, 0);

这个代码将元素向右移动50像素，向下移动100像素，Z方向不移动。