Question

我不确定我是否设置了某些元素的位置错误，或者我根本无法使用＆＃34;％＆＃34;用于matrix转换。我试图做这样的事情 - ＆gt;

element.style.transform="matrix(1,0,0,1,0,-100%)"

但这没有任何作用。

Answer 1

我们可以在矩阵函数中使用百分比吗？

不，您无法在matrix转换功能中使用百分比值。以下是W3C Specs for Transform Functions的摘录。如您所见，matrix函数的参数仅指定为<number>，而translate函数的参数指定为<number-percentage>。这表明矩阵只能接受数值，而翻译可以接受百分比。

matrix（）= matrix（＆lt; number＆gt; [，＆lt; number＆gt;] {5,5}）

以六个值a-f的变换矩阵的形式指定2D变换。

translate（）= translate（＆lt; length-percentage＆gt; [，＆lt; length-percentage＆gt;]？）

通过向量[tx，ty]指定2D平移，其中tx是第一个平移值参数，ty是可选的第二个平移值参数。如果＆lt; ty＆gt;没有提供，ty为零值。

translateX（）= translateX（＆lt; length-percentage＆gt;）

指定X方向上给定量的平移。

translateY（）= translateY（＆lt; length-percentage＆gt;）

指定Y方向上给定量的平移。

matrix3d（）= matrix3d（＆lt; number＆gt; [，＆lt; number＆gt;] {15,15}）

将3D变换指定为以列为主的16个值的4x4齐次矩阵。

translate3d（）= translate3d（＆lt; length-percentage＆gt;，＆lt; length-percentage＆gt;，＆lt; length＆gt;）

指定矢量[tx，ty，tz]的3D平移，tx，ty和tz分别是第一，第二和第三平移值参数。

规范如何定义数值？

以下是W3C Spec定义<number>：

的方式

数值由＆lt; number＆gt;表示，表示实数，可能包含小数组件。

当按字面意思书写时，数字可以是整数，也可以是零或更多的十进制数字，后跟一个点（。）后跟一个或多个十进制数字，还可以选择一个由＆＃34; e＆＃34;组成的指数。或＆＃34; E＆＃34;和整数。它对应于＆lt; number-token＆gt;在CSS语法模块[CSS3SYN]中生成。与整数一样，数字的第一个字符可以紧跟在 - 或+之前，以表示数字的符号。

那我现在该怎么办？

您应该将百分比值转换为正常实数，然后在matrix函数中使用它。它通常是所需轴（包括边框和填充）*中所需百分比的方框。因此，对于100x100px尺寸，5px填充和所有边上1px边框的盒子，100％平移将等于112，而-50％将等于-56。

您可以参考The Matrix Resolutions网站查看其实际情况。以下是两种方法的演示。

＆＃13;

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);
}

＆＃13;

<div class='matrix'>Hello! I'm using matrix.</div>
<div class='translate'>Hello! I'm using translate.</div>

＆＃13;

我可以使用CSS3矩阵变换的百分比单位

1 个答案:

我们可以在矩阵函数中使用百分比吗？

规范如何定义数值？

那我现在该怎么办？