我可以在 CSS3 矩阵变换中使用百分比单位吗

Question

我不确定我是否设置了某些元素的位置错误，或者我根本无法使用“%”进行 matrix 转换。我正在尝试做这样的事情 -->

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( <number> [, <number> ]{5,5} )

specifies a 2D transformation in the form of a transformation matrix of the six values a-f.

translate() = translate( <length-percentage> [, <length-percentage> ]? )

specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.

translateX() = translateX( <length-percentage> )

specifies a translation by the given amount in the X direction.

translateY() = translateY( <length-percentage> )

specifies a translation by the given amount in the Y direction.

matrix3d() = matrix3d( <number> [, <number> ]{15,15} )

specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.

translate3d() = translate3d( <length-percentage> , <length-percentage> , <length> )

specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.

规范如何定义数值？

下面是 W3C Spec 定义 <number> 的方式：

Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.

那我现在该怎么办？

您应该将百分比值转换为正常的实数，然后在matrix 函数中使用它。一般是框在需要的轴上的尺寸（包括border和padding）*需要的百分比。因此，对于一个尺寸为 100x100px、边距为 5px、边框为 1px 的盒子，100% translate 将等于 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>

我可以在 CSS3 矩阵变换中使用百分比单位吗

Can I use percentage units with CSS3 matrix transform

css

matrix

css-transforms

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

规范如何定义数值？

那我现在该怎么办？