scaleX()

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

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

备注: Note:

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

Syntax

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
s 0 0 1 s 0 0 0 1 0 0 0 1 s 0 0 0 1 0 0 0 1 s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
[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