我不确定我是否错误地设置了某些元素的位置，或者我根本无法将“%”用于matrix 转换。我正在尝试做这样的事情-->
element.style.transform="matrix(1,0,0,1,0,-100%)"
但这无济于事。
【问题讨论】：
matrix 函数中使用百分比，因为规范本身并未将百分比作为有效值。
标签： css matrix css-transforms
不，您不能在matrix 转换函数中使用百分比值。以下是W3C Specs for Transform Functions 的摘录。如您所见，matrix 函数的参数仅指定为<number>，而translate 函数的参数为<number-percentage>。这表明矩阵只能接受数值，而转换可以接受百分比。
matrix() = 矩阵(
[, ]{5,5} ) 以六个值 a-f 的变换矩阵的形式指定 2D 变换。
translate() = translate(
[, ]?) 通过向量 [tx, ty] 指定二维平移，其中 tx 是第一个平移值参数，ty 是可选的第二个平移值参数。如果未提供
，则 ty 的值为零。 translateX() = translateX(
) 指定 X 方向上给定的平移量。
translateY() = translateY(
) 指定在 Y 方向上的给定量的平移。
matrix3d() = matrix3d(
[, ]{15,15} ) 将 3D 转换指定为 4x4 齐次矩阵，其中包含 16 个值（以列为主）。
translate3d() = translate3d(
, , ) 通过向量 [tx,ty,tz] 指定 3D 平移，其中 tx、ty 和 tz 分别是第一个、第二个和第三个平移值参数。
下面是W3C Spec如何定义<number>：
数值用
表示，代表实数，可能带有小数部分。 按字面意思书写时，数字可以是整数，也可以是零个或多个小数位，后跟一个点 (.)，后跟一个或多个小数位，还可以选择由“e”或“E”和一个整数组成的指数.它对应于 CSS 语法模块 [CSS3SYN] 中的
产生式。与整数一样，数字的第一个字符前面可以紧跟 - 或 + 以表示数字的符号。
您应该将百分比值转换为普通实数，然后在matrix 函数中使用它。它通常是框在所需轴上的尺寸（包括边框和填充）*所需百分比。因此，对于尺寸为 100x100 像素、内边距为 5 像素且所有边均为 1 像素边框的框），100% 平移将等于 112，而 -50% 将等于 -56。
您可以参考The Matrix Resolutions 站点来查看它的运行情况。以下是两种方法的演示。
div {
height: 100px;
width: 100px;
margin: 10px;
padding: 5px;
border: 1px solid rebeccapurple;
background: rgba(102, 51, 153, 0.25);
}
.translate {
transform: translate(100%, 100%);
}
.matrix {
transform: matrix(1, 0, 0, 1, 112, 112);
}<div class='matrix'>Hello! I'm using matrix.</div>
<div class='translate'>Hello! I'm using translate.</div>【讨论】：