CSS | scaleX()函数

在CSS中，scaleX()函数被用来水平缩放一个元素，可以将元素变得更长或更短。

语法

transform: scaleX(value);

其中，value可以是一个数字，例如 2 表示将元素水平扩大两倍，也可以是一个小数，例如 0.5 表示将元素水平缩小一半。

示例

.box {
  transform: scaleX(2);
}

上述代码将 .box 元素水平扩大了两倍。

.box {
  transform: scaleX(0.5);
}

上述代码将 .box 元素水平缩小了一半。

多个函数同时使用

scaleX() 函数可以和其他 transform 函数一起使用，例如 rotate()，来产生多种效果。

.box {
  transform: scaleX(2) rotate(45deg);
}

上述代码会先将 .box 元素水平扩大两倍，然后旋转45度。

结语

scaleX() 函数是CSS中一个非常实用的函数，可以被用来创建不同的动画效果。在实际应用中，它可以和其他 transform 函数一起使用，让元素展现更加多样化的效果。