scale3d()

scale3d() CSS 函数 定义了在 3D 空间中调整元素大小的变换。由于缩放量由向量 [sx, sy, sz] 定义，因此它可以以不同的比例调整不同的维度。其结果为 <transform-function> 数据类型。

试一试

此缩放变换以三维向量为特征。其坐标定义了每个方向的缩放量。如果所有三个坐标都相等，则缩放是均匀的（*各向同性*），并且元素的*纵横比*将保留（这是一种*相似变换*）。

当坐标值超出 [-1, 1] 范围时，元素沿该维度增长；当在内部时，它会缩小。如果它为负数，则结果将在该维度上进行*点反射*。值为 1 不会产生任何影响。

语法

scale3d() 函数使用三个值指定，这些值代表要沿每个方向应用的缩放量。

css
scale3d(sx, sy, sz)

值

sx

是 <number>，表示缩放向量的横坐标（水平，x 分量）。

sy

是 <number>，表示缩放向量的纵坐标（垂直，y 分量）。

sz

是 <number>，表示缩放向量的 z 分量。

笛卡尔坐标 在 ℝ^2 上 齐次坐标 在 ℝℙ^2 上 笛卡尔坐标在 ℝ^3 上 齐次坐标在 ℝℙ^3 上
此变换应用于 3D 空间，无法在平面上表示。 ( sx 0 0 0 sy 0 0 0 sz ) \left( \begin{array}{ccc} sx & 0 & 0 \\ 0 & sy & 0 \\ 0 & 0 & sz \end{array} \right) ( sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 ) \left( \begin{array}{cccc} sx & 0 & 0 & 0 \\ 0 & sy & 0 & 0 \\ 0 & 0 & sz & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)

示例

不改变原点

HTML

html
<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  background-color: pink;
}

结果

平移变换的原点

HTML

html
<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
  transform-origin: left;
  background-color: pink;
}

结果

规范

规范
CSS 变换模块级别 2
# funcdef-scale3d

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅