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

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 ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[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

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

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")}}