--- title: scaleX() slug: Web/CSS/transform-function/scaleX() tags: - axial symmetry - scaleX() - scaleX(-1) translation_of: Web/CSS/transform-function/scaleX() ---

scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。缩放不是各向同性的，并且元素的角度不保守。

scaleX(sx) 是 scale(sx, 1) 或 scale3d(sx, 1, 1) 的一个速记/缩写。

Note:

scaleX(-1) 定义一个轴向对称性(axial symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。

Syntax

scaleX(s)

Values

s: Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} s & 0 \\ 0 & 1 \end{matrix})$	`[s 0 0 1 0 0]`

Examples

Without changing the origin

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scaleX(2);
  background-color: blue;
}

Result

Translating the origin of the transformation

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scaleX(2);
  transform-origin: left;
  background-color: blue;
}

Result

{{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}