什么是scaleZ()CSS变换函数？

似乎在被问到两年之后回答一个问题,但是后来发贴.

它与变换矩阵和矩阵向量乘法有关.基本上,除非数学计算出来生成Z坐标大于零的乘积,否则变换将不会起作用.

这很容易解释,但如果你没有数学背景,有点难以理解. (但是周末的WikiPedia阅读和Google搜索将会教你足够的,这就是我学到的)每个变换函数,除了matrix()和matrix3d()都有一个等价的矩阵值.对于scale3d,矩阵为：

[sx 0 0 0]
[0 sy 0 0]
[0 0 sz 0]
[0 0  0 1]

其中sx,sy和sz是关于x,y和z轴缩放的因素.对于scaleZ,它是一样的,但是sx和sy都是1.

当您应用变换时,浏览器将获取对象每个顶点的坐标(以非书面语言为单位：取每个框角的坐标),并将其乘以变换矩阵.其产物成为对象的新坐标.例如,在(100,50,0)开始的对象上,transform(scaleZ(3))的变换数学如下所示：

[1 0 0 0]   [100]   [100]
[0 1 0 0] * [ 50] = [ 50]
[0 0 3 0]   [  0]   [  0]
[0 0 0 1]   [  1]   [  1]

当转换为3D坐标系时,该产品[100 50 0 1]成为我们开始的：(100,0).结果是看起来没有应用转换.为了使用scaleZ()的变换具有效果,矩阵和向量的乘积中的第三个数字必须大于零.通常当scaleZ()或scale3d()应用于父元素时,或者与另一个变换函数组合使用时会发生.在这两种情况下,累积/当前变换矩阵导致值大于零的Z坐标.以下是使用transform：rotateY(30deg)scaleZ(3)的示例.首先,我们需要将rotateY(30deg)的矩阵乘以scaleZ(3)的矩阵.

[0.866 0 -0.499 0]   [1 0 0 0]   [0.866 0 -1.497 0]
[0     1  0     0] * [0 1 0 0] = [0     1  0     0]
[0.499 0  0.866 0]   [0 0 3 0]   [0.499 0  2.598 0]
[0     0  0     1]   [0 0 0 1]   [0     0  0     0]

那么我们可以将我们的矩阵乘积(该位在等号右边)乘以(100,0).

[0.866  0 -1.497  0]   [100]   [86.6]
[0      1  0      0] * [ 50] = [50  ]
[0.499  0  2.598  0]   [  0]   [49.9]
[0      0  0      1]   [  1]   [ 1  ]

我们的产品[86.6 50 49.9 1]如果我们舍弃了整数,就出于坐标(87,50).而第二个50是我们的Z坐标.变革有明显的效果.