scale()
scale() CSS 函数定义了一种在二维平面上调整元素大小的变换。由于缩放量由一个向量 [sx, sy] 定义，因此可以以不同的比例调整水平和垂直尺寸。其结果是一个 <transform-function> 数据类型。
试一试
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="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
此缩放变换由一个二维向量来描述。其坐标定义了在每个方向上的缩放量。如果两个坐标相等，则缩放是均匀的（isotropic），并且元素的宽高比得以保留（这是一种位似变换）。
当坐标值在 [-1, 1] 范围之外时，元素会沿该维度放大；在此范围内时，则会缩小。如果值为负，则会使元素在该维度上进行点反射。值为 1 时没有效果。
备注： scale() 函数只在二维空间进行缩放。要在三维空间进行缩放，请改用 scale3d()。
语法
css
scale(sx)
scale(sx, sy)
值
sx-
一个
<number>或<percentage>，表示缩放向量的横坐标（水平，x 轴分量）。 sy可选-
一个
<number>或<percentage>，表示缩放向量的纵坐标（垂直，y 轴分量）。如果未定义，其默认值为sx，从而实现保持元素宽高比的均匀缩放。
正式语法
<scale()> =
scale( <number> , <number>? )
无障碍
缩放/缩放动画对无障碍性存在问题，因为它们是某些类型偏头痛的常见诱因。如果需要在网站中包含此类动画，应提供一个控件，允许用户关闭动画，最好是全站范围的。
此外，可以考虑使用 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 |
浏览器兼容性
加载中…