View in English Always 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,在这种情况下,函数是身份变换。缩放不是各向同性的,并且元素的角度不保守。

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

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

Syntax

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 R²	Homogeneous coordinates on RP²	Cartesian coordinates on R³	Homogeneous coordinates on RP³
$(\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 class="transformed">bar</p>

css

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

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;
}

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

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.