scaleZ()CSS转换函数有什么作用？

Question

我正试图将我的小脑圈包裹在3D CSS变换中,而我无法理解该scaleZ()函数的用途.

scale(),scaleX()并且scaleY()有意义:它们沿着指定的轴拉伸元素,沿着该轴将其尺寸乘以您提供的数字.

但scaleZ()似乎不同:

1. 它适用于元素的子元素
2. 它不会影响子元素的尺寸,因为HTML元素沿z轴没有任何尺寸(即,您不能使<div>"更厚").

WebKit博客说:

[ scaleZ()]影响转换子节点中沿z轴的缩放.

我无法弄清楚这在实践中意味着什么.任何人都可以提供解释,最好是一些示例代码吗？

Answer 1

在问到问题两年后,似乎很难回答问题,但是为后人发布了这个问题.

它与变换矩阵和矩阵向量乘法有关.基本上,除非数学运算产生Z坐标大于零的乘积,否则变换似乎不起作用.

这很容易解释,但如果你没有数学背景,有点难以理解.(但周末值得的WikiPedia阅读和谷歌搜索会教你足够的.这就是我学习它的方法.)每个变换函数,除了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.

当您应用变换时,浏览器会获取对象的每个顶点的坐标(在非书呆子中说:获取每个方框角的坐标)并将其乘以变换矩阵.它的乘积成为对象的新坐标.例如,transform: scaleZ(3)从(100,50,0)开始的对象的数学看起来有点像这样:

[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,50,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,50,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)的坐标.而第二个50是我们的Z坐标.变换有明显的效果.