CSS 函数 - scale（）

CSS 中的 scale（） 函数用于对二维平面上的元素应用缩放转换（调整大小）。该函数可以在不同的比例下水平和垂直调整元素的大小，因为缩放量由向量 [sx， sy] 定义。结果是 <transform-function> 数据类型。

缩放变换由二维向量确定，其坐标指定了在每个方向上将执行的缩放或调整大小。
当两个坐标相等时，缩放将是均匀的（各向同性），并且元素的纵横比将保持不变。这种形式的标度变换被称为同调变换。
如果坐标值超出 [-1， 1] 范围，则元素将在指定的维度上增长。
如果坐标值在 [-1， 1] 范围内，则元素将在指定的尺寸中收缩。
如果坐标值为负，则会导致指定尺寸的点反射。
当值为 1 时，它对元素的大小没有影响。

使用 scale（） 函数进行缩放只能在二维平面中完成。为了在三维平面上实现缩放，您需要使用 scale3d（）函数。

可能的值

函数 scale（）可以接受一个或两个值作为参数，表示在每个方向上应用的缩放量。

sx：它是一个 <number> 或 <percentage> 值，表示缩放向量的横坐标（水平，x 坐标）。
sy：它是一个 <number> 或 <percentage> 值，表示缩放向量的纵坐标（垂直，y 坐标）。如果未为 sy 指定任何值，则默认为 sx 的值，这会导致均匀缩放，同时保留元素的纵横比。

语法


transform: scale(sx) | scale(sx, sy);

可访问性问题：调整网站上动画的大小或缩放对于用户界面来说是一个有问题的情况。因此，如果您想在网页上包含动画的缩放，请为用户提供一个控件，以便他们可以关闭动画。

CSS scale（） - 一起缩放 X 和 Y 维度

以下示例中 X 和 Y 维度在 scale（）函数中一起传递，其中 scale（0.6） 等同于 scaleX（0.6） scaleY（0.6）：


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: cyan;
	 	 	 border: 2px solid black;
	 	}

	 	.scale-single-value {
	 	 	 background-color: pink;
	 	}

	 	#xy:hover {
	 	 	 transform: scale(0.6);
	 	}
	 	</style>
	 	</head>
	 	<body>
	 	 	 <section>
	 	 	 	 	<p>No function</p>
	 	 	 	 	<div></div>
	 	 	 </section>

	 	<section>
	 	 	 <p>scale(0.6)</p>
	 	 	 <div id="xy" class="scale-single-value"></div>
	 	</section>
	 	</body>
	 	</html>

CSS scale（） - 分别缩放 X 和 Y 维度

在以下示例中，X 和 Y 维度是单独传递的，其中 scale（0.5， 0.8） 等同于 scaleX（0.5） scaleY（0.8），tranform-origin 设置为 right


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: cyan;
	 	 	 border: 2px solid black;
	 	}

	 	.scale-double-value {
	 	 	 background-color: lightgreen;
	 	}

	 	#x-y:hover {
	 	 	 transform: scale(0.5, 0.8);
	 	 	 transform-origin: right;
	 	}
	 	</style>
	 	</head>
	 	<body>
	 	 	 <section>
	 	 	 	 	<p>No function</p>
	 	 	 	 	<div></div>
	 	 	 </section>

	 	<section>
	 	 	 <p>scale(0.5, 0.8)</p>
	 	 	 <div id="x-y" class="scale-double-value"></div>
	 	</section>
	 	</body>
	 	</html>

打印本页