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>
