transfarm详解

在CSS中是允许我们旋转，缩放，倾斜，甚至平移元素的，使用transform属性修改CSS视觉格式化模型的坐标空间实现。
它的属性有：

• translate(平移)
• rotate(旋转)
• scale(缩放)

1.平移

translate函数是 CSS3 中的一个 transform 函数，用于对元素进行平移（移动）变换。它接受一个或两个参数，指定元素在水平和垂直方向上的位移值。
例如：

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: translate(50px, 50px);
}

在这个示例中，我们创建了一个红色的正方形盒子，宽度和高度都是200px。
通过使用transform属性和translate()函数，我们将该盒子沿着X轴和Y轴分别平移了50px，使其向右下方移动了一段距离。
当然，指定元素在水平方向上的位移值。可以是一个长度值（如像素、百分比等），也可以是一个表示距离的计量单位（如 em、rem）。
指定元素在垂直方向上的位移值。如果省略，则默认为 0。

2.旋转

rotate() 函数用于对元素进行旋转变换，它接受一个参数，表示元素旋转的角度。

transform: rotate(angle);

例如：

/* 将元素顺时针旋转 45 度 */
transform: rotate(45deg);

/* 将元素逆时针旋转 90 度 */
transform: rotate(-90deg);

/* 将元素顺时针旋转 180 度 */
transform: rotate(180deg);

3.缩放

scale() 函数用于对元素进行缩放变换，它接受一个或两个参数，表示元素在水平和垂直方向上的缩放比例
语法如下：

transform: scale(sx, sy);

• sx：表示元素在水平方向上的缩放比例。
• sy：（可选）表示元素在垂直方向上的缩放比例。如果省略 sy，则默认为与 sx 相同的值。