html - 在 matrix3d 中使用视口(viewport)单位

Question

有没有办法在 matrix3d 中使用视口(viewport)单位？

matrix3d[1 0 0 0
         0 1 0 0
         0 0 1 0
         x y z 1]/*i want x and y in viewport units not px*/

即:translate3d(80vw,90vh,1px)

Answer 1

根据mozilla文档，只有FF支持

Coordinates for 3D graphics Functions defining transformations matrix()

The matrix() CSS function specifies an homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.

matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Note: Gecko (Firefox) accepts a value for tx and ty. Webkit (Safari, Chrome) and Opera currently support a unitless for tx and ty.

MDN transforms page