index.md

title	slug
scaleX()	Web/CSS/transform-function/scaleX

{{CSSRef}}

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

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

备注： scaleX(-1) 定义一个 轴向对称性，它具有一个垂直轴通过原点（由 {{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")}}

规范

{{Specifications}}