View in EnglishAlways switch to English

scaleX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

尝试一下

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-0.5);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

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

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

css

scaleX(s)

s: Is a<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]`

html

<p>foo</p><p>bar</p>

css

p {  width: 50px;  height: 50px;  background-color: teal;}.transformed {  transform: scaleX(2);  background-color: blue;}

html

<p>foo</p><p>bar</p>

css

p {  width: 50px;  height: 50px;  background-color: teal;}.transformed {  transform: scaleX(2);  transform-origin: left;  background-color: blue;}

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

This page was last modified on⁨2025年11月10日⁩ byMDN contributors.