scaleY()

Baseline 已广泛支持

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

scaleY() CSS 函数定义了一种沿 y 轴（垂直方向）调整元素大小的变换。其结果是一种 <transform-function> 数据类型。

试一试

transform: scaleY(1);

transform: scaleY(0.7);

transform: scaleY(1.3);

transform: scaleY(-0.5);

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

它通过一个常数因子来修改每个元素点的纵坐标（垂直方向的 y 坐标），但缩放因子为 1 时除外，此时该函数是恒等变换。这种缩放不是各向同性的，元素的角度也不会被保留。scaleY(-1) 定义了一个轴对称变换，对称轴为一条穿过原点（由 transform-origin 属性指定）的水平轴。

备注： scaleY(sy) 等价于 scale(1, sy) 或 scale3d(1, sy, 1)。

transform: rotateX(180deg); === transform: scaleY(-1);

语法

css

scaleY(s)

值

s: 是一个 <number>，表示应用于元素每个点的纵坐标（垂直方向的 y 坐标）的缩放因子。

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

正式语法

<scaleY()> = 
  scaleY( <number> )

示例

HTML

html

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

CSS

css

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

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

结果

规范

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

浏览器兼容性

另见

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

帮助改进 MDN

了解如何贡献

此页面的最后修改时间：⁨2025 年 10 月 10 日⁩，由 MDN 贡献者们修改。

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