transform:

transform 是一个 CSS 属性，用于对元素进行变换。它可以改变元素的位置、尺寸、旋转、倾斜等效果。常见的取值有：

- translate()：平移元素的位置
- rotate()：旋转元素
- scale()：缩放元素的大小
- skew()：倾斜元素
- matrix()：通过 2D 变换矩阵进行变换

你可以根据需要组合使用这些取值，以实现各种不同的变换效果。

相关问题

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方向不移动。

transform:scale

transform:scale 是 CSS 中的一个属性，用于对元素进行缩放操作。它可以改变元素的大小，同时保持其宽高比。

语法示例：

selector {
  transform: scale(x, y);
}

其中，x 和 y 是缩放因子，可以是一个小数或百分比。如果 x 和 y 相等，则元素在水平和垂直方向上均匀缩放；如果 x 和 y 不相等，则元素在水平和垂直方向上分别独立缩放。

例如：

div {
  transform: scale(2);
}

这将使 div 元素的大小增加一倍。

注意：transform:scale 只会改变元素的视觉表现，并不会改变其实际占据空间大小。同时，缩放操作也会影响元素的子元素以及其所占据的空间。