scaleX()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

scaleX() CSS 函数定义了一个变换，用于沿着 x 轴（水平方向）调整元素的大小。其结果是 <transform-function> 数据类型。

试一试

transform: scaleX(1);

transform: scaleX(0.7);

transform: scaleX(1.3);

transform: scaleX(-0.5);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

它通过一个常数因子修改每个元素点的横坐标（水平，x 坐标），除非缩放因子为 1，在这种情况下，该函数是恒等变换。缩放不是各向同性的，并且元素的角度通常不守恒，除了 90 度的倍数。scaleX(-1) 定义了一个轴对称，垂直轴穿过原点（由 transform-origin 属性指定）。

注意：scaleX(sx) 等价于 scale(sx, 1) 或 scale3d(sx, 1, 1)。

语法

css

scaleX(s)

值

s: 一个 <number>，表示应用于元素每个点的横坐标（水平，x 坐标）的缩放因子。

笛卡尔坐标，在 ℝ^2 上	齐次坐标，在 ℝℙ^2 上	笛卡尔坐标，在 ℝ^3 上	齐次坐标，在 ℝℙ^3 上
$\left( \begin{array}{cc} s & 0 \\ 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{ccc} s & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$\left( \begin{array}{cccc} s & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[s 0 0 1 0 0]`

正式语法

<scaleX()> = 
  scaleX( <number> )

示例

HTML

html

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}

结果

规范

规范
CSS 变换模块级别 1 # funcdef-transform-scalex

浏览器兼容性

另见

scaleY()
scaleZ()
transform
scale
<transform-function>
transform-origin
其他单独的变换属性
- translate
- rotate
- 注意：没有 skew 属性

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者上次修改于 2025 年 10 月 10 日。

在 GitHub 上查看此页面 • 报告此内容的问题