scale(),scaleX()和scaleY()有意义：它们沿着指定的轴伸展元素,将其沿该轴的维度乘以您提供的数字.
但是scaleZ()似乎有所不同：
>它适用于元素的子元素
>它不影响子元素的尺寸,因为HTML元素在z轴上没有任何尺寸(即,您不能使< div>“更厚”).
[
scaleZ()] affects the scaling along the z axis in transformed children.
我无法弄清楚这在实践中是什么意思.任何人都可以提供解释,最好用一些示例代码？
解决方法
它与变换矩阵和矩阵向量乘法有关.基本上,除非数学计算出来生成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坐标.变革有明显的效果.
