CSS 函数 - scale3d（）

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

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

可能的值

函数 scale3d（）接受三个值作为参数，表示在每个方向上应用的缩放量。

sx：它是一个 <number> 值，表示缩放向量的横坐标（水平，x 坐标）。
sy：它是一个 <number> 值，表示缩放向量的纵坐标（垂直，y 坐标）。
sz：它是一个 <number> 值，表示缩放向量的 z 分量。

语法


transform: scale3d(sx, sy, sz);

CSS scale3d（） - 有或没有 transform-origin 值

以下是给定和不给定 transform-origin 值的 scale3d（）函数示例：


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

	 	.scaled-without-origin {
	 	 	 background-color: pink;
	 	 	 transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
	 	}

	 	.scaled-with-origin {
	 	 	 background-color: lightgreen;
	 	 	 transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
	 	 	 transform-origin: right;
	 	}
</style>
</head>
<body>
	 	<section>
	 	 	 <div>No function</div>
	 	</section>
	 	
	 	<section>
	 	 	 <div class="scaled-without-origin">w/o transform-origin</div>
	 	</section>

	 	<section>
	 	 	 <div class="scaled-with-origin">with transform-origin</div>
	 	</section>
</body>
</html>

打印本页