scale()
该scale() CSS函数定义了在2D平面上调整元素大小的变换。由于缩放的量由矢量定义，因此可以以不同的缩放比调整水平和垂直尺寸。
该缩放变换的特征在于二维矢量。其坐标表示在每个方向上完成多少缩放。如果两个坐标相等，缩放比例是均匀的（各向同性的）并且元素的纵横比被保留（这是一个同态变换homothetic transformation）。
当坐标值在-1,1范围之外时，元素沿着该维度增长; 当处在该范围内时，它随着该维度缩小。如果值是负的，那么结果就是在这个维度上的一个点反射。值1不起作用。
注意：该scale()功能只能在2D中缩放。要在3D中缩放，请改用scale3d()。
语法
该scale()函数用一个或两个值来指定，这些值表示要在每个方向上应用的缩放量。
scale(sx)
scale(sx, sy)可能值
sx ——一个表示缩放矢量的横坐标的<number>。
sy——一个表示缩放矢量的纵坐标的<number>。如果未定义，则其默认值为sx，导致保持元素纵横比的统一缩放比例。
Cartesian coordinates on ?2 | Homogeneous coordinates on ??2 | Cartesian coordinates on ?3 | Homogeneous coordinates on ??3 |
|---|---|---|---|
sx0 0sy | sx000sy0001 | sx000sy0001 | sx0000sy0000100001 |
| sx 0 0 sy 0 0 |
实例
X维和Y维一起缩放
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>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
<div>Normal</div>
<div class="scaled">Scaled</div>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;
}结果
另见
transform
<transform-function>
scale3d()
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
