scaleX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

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

备注： scaleX(-1) 定义一个 轴向对称性，它具有一个垂直轴通过原点（由 transform-origin 属性规定）。

Syntax

css
scaleX(s)

Values

s

Is a <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

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

CSS

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

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

Result

Translating the origin of the transformation

HTML

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

CSS

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

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

Result

规范

Specification
CSS Transforms Module Level 1
# funcdef-transform-scalex