scaleX()

基线广泛可用

此功能已得到很好的建立，并在许多设备和浏览器版本上运行。它自 2015 年 9 月.

报告反馈

**scaleX()** CSS 函数定义了沿 x 轴（水平方向）调整元素大小的变换。其结果为 <transform-function> 数据类型。

它通过一个常数因子修改每个元素点的横坐标（水平，x 坐标），除非缩放因子为 1，在这种情况下函数为恒等变换。缩放不是各向同性的，元素的角度通常不会保留，除非是 90 度的倍数。scaleX(-1) 定义了轴对称，其垂直轴通过原点（如 transform-origin 属性所指定）。

注意：scaleX(sx) 等效于 scale(sx, 1) 或 scale3d(sx, 1, 1)。

scaleX(s)

是一个 `<number>`，表示要应用于元素每个点的横坐标（水平，x 坐标）的缩放因子。	笛卡尔坐标系上 ℝ^2	齐次坐标上 ℝℙ^2	笛卡尔坐标系上 ℝ^3
$齐次坐标上 ℝℙ^3$	$\left( \begin{array}{cc} s & 0 \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{cc} s & 0 \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$
$齐次坐标上 ℝℙ^3$	`\left( \begin{array}{cccc} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)`

[s 0 0 1 0 0]

<div>Normal</div>
<div class="scaled">Scaled</div>

注意：scaleX(sx) 等效于 scale(sx, 1) 或 scale3d(sx, 1, 1)。

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

结果
规范 # CSS 变换模块级别 1

funcdef-transform-scalex