scale()

基线 广泛可用

此功能非常成熟，可在许多设备和浏览器版本上运行。自 2015 年 9 月.

scale() CSS 函数 定义了一个在二维平面上调整元素大小的转换。由于缩放量由向量 [sx, sy] 定义，因此它可以以不同的比例调整水平和垂直尺寸。其结果是 <transform-function> 数据类型。

试一试

此缩放转换以二维向量为特征。其坐标定义了每个方向上的缩放量。如果两个坐标相等，则缩放是均匀的（*各向同性*），并且元素的纵横比保持不变（这是一个 相似变换）。

当坐标值超出 [-1, 1] 范围时，元素沿该维度增长；当在范围内时，它缩小。负值导致沿该维度发生 点反射。值 1 没有影响。

注意：scale() 函数仅在二维中进行缩放。要在三维中进行缩放，请改用 scale3d()。

语法

scale() 函数使用一个或两个值指定，它们分别表示要应用于每个方向的缩放量。

css
scale(sx)

scale(sx, sy)

值

sx

一个 <number> 或 <percentage>，表示缩放向量的横坐标（水平，x 分量）。

sy

一个 <number> 或 <percentage>，表示缩放向量的纵坐标（垂直，y 分量）。如果未定义，其默认值为 sx，导致均匀缩放，保持元素的 纵横比。

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

无障碍

缩放/缩放动画对于无障碍而言存在问题，因为它们是某些类型偏头痛的常见触发因素。如果您需要在网站上包含此类动画，您应该提供一个控制按钮，让用户能够关闭动画，最好是全站关闭。

此外，请考虑使用 prefers-reduced-motion 媒体特性 - 使用它编写一个 媒体查询，如果用户在系统首选项中指定了减少动画，则该查询将关闭动画。

了解更多

示例

同时缩放 X 和 Y 维度

HTML

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

CSS

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

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

结果

分别缩放 X 和 Y 维度，并将原点平移

HTML

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

CSS

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

.scaled {
  transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: left;
  background-color: pink;
}

结果

规范

规范
CSS 转换模块级别 1
# funcdef-transform-scale

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅