DOMMatrixReadOnly: scale3d() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起,所有主流瀏覽器均已支援。

注意:此功能在 Web Workers 中可用。

scale3d() 方法是 DOMMatrixReadOnly 介面的一個方法,它建立一個新矩陣,該矩陣是透過對當前矩陣應用 3D 縮放變換而得到的。它返回一個由原始 3D 矩陣根據指定的縮放因子(以指定的原點為中心)縮放而建立的新 DOMMatrix,預設原點為 (0, 0, 0)。原始矩陣不會被修改。

要邊進行 3D 縮放邊修改矩陣,請參閱 DOMMatrix.scale3dSelf()

語法

js
scale3d()
scale3d(scale)
scale3d(scale, originX)
scale3d(scale, originX, originY)
scale3d(scale, originX, originY, originZ)

引數

scale

乘數;縮放值。如果未提供縮放值,則預設為 1

originX 可選

變換原點的 x 座標。如果未提供原點,則預設為 0

originY 可選

變換原點的 y 座標。如果未提供原點,則預設為 0

originZ 可選

變換原點的 z 座標。如果此值為 0(省略時的預設值),則結果矩陣可能不是 3D 的。

返回值

一個 DOMMatrix

示例

js
const matrix = new DOMMatrix();
console.log(matrix.toString()); // no transforms applied
// matrix(1, 0, 0, 1, 0, 0)

console.log(matrix.scale3d(2).toString());
/* matrix3d(
    2, 0, 0, 0, 
    0, 2, 0, 0, 
    0, 0, 2, 0, 
    0, 0, 0, 1) */
console.log(matrix.scale3d(0.5, 25, 25, 1.25).toString());
/* matrix3d(
    0.5, 0, 0, 0, 
    0, 0.5, 0, 0, 
    0, 0, 0.5, 0, 1
    2.5, 12.5, 0.625, 1) */
console.log(matrix.toString()); // original matrix is unchanged
// matrix(1, 0, 0, 1, 0, 0)

規範

規範
Geometry Interfaces Module Level 1
# dom-dommatrixreadonly-scale3d

瀏覽器相容性

另見