scale()

该scale() CSS函数定义了在2D平面上调整元素大小的变换。由于缩放的量由矢量定义，因此可以以不同的缩放比调整水平和垂直尺寸。

该缩放变换的特征在于二维矢量。其坐标表示在每个方向上完成多少缩放。如果两个坐标相等，缩放比例是均匀的（各向同性的）并且元素的纵横比被保留（这是一个同态变换homothetic transformation）。

当坐标值在-1,1范围之外时，元素沿着该维度增长; 当处在该范围内时，它随着该维度缩小。如果值是负的，那么结果就是在这个维度上的一个点反射。值1不起作用。

注意：该scale()功能只能在2D中缩放。要在3D中缩放，请改用scale3d()。

语法

该scale()函数用一个或两个值来指定，这些值表示要在每个方向上应用的缩放量。

scale(sx)

scale(sx, sy)

可能值

sx ——一个表示缩放矢量的横坐标的<number>。

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()