1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. 值
  5. transform-function
  6. scale()

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

scale()

基线 广泛可用

自 2015年7月 起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

尝试一下

transform: scale(1);

transform: scale(0.7);

transform: scale(1.3, 0.4);

transform: scale(-0.5, 1);

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

该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为 1 时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

备注：scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。

语法

css
scale(sx)

或

css
scale(sx, sy)

值

sx

<number>，表示缩放向量的横坐标。

sy

<number> ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。从而使得元素在保持原有形状下均等缩放

ℝ2上的笛卡尔坐标变换 ℝℙ2上的齐次坐标变换 ℝ3上的笛卡尔坐标变换 ℝℙ3上的齐次坐标变换
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]

示例

单一维度缩放

HTML

html
<p>foo</p>
<p class="transformed">bar</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* 等同于变换：scaleX(2) scaleY(2);*/
  transform: scale(2);
  background-color: blue;
}

结果

在 X 和 Y 两个维度缩放并移动缩放中心

HTML

html
<p>foo</p>
<p class="transformed">bar</p>

CSS

css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  /* 等同于 scaleX(2) scaleY(0.5) */
  transform: scale(2, 0.5);
  transform-origin: left;
  background-color: blue;
}

结果

规范

规范
CSS Transforms Module Level 1
# funcdef-transform-scale

帮助改进 MDN

了解如何参与贡献

此页面最后更新于 ，由 MDN 贡献者更新。

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