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

Question

我正试图用我的小脑袋来处理 3D CSS 转换，但我无法理解 scaleZ() 是什么功能是为了。

scale() , scaleX()和 scaleY()有意义:它们沿指定的轴拉伸(stretch)元素，将元素沿该轴的尺寸乘以您提供的数字。

但是scaleZ()似乎不同:

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

The WebKit blog says :

[scaleZ()] affects the scaling along the z axis in transformed children.

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

Answer 1

在提出问题两年后回答这个问题似乎很愚蠢，但为了后代而张贴。

它与变换矩阵和矩阵向量乘法有关。基本上，除非数学计算得出 Z 坐标大于零的乘积，否则变换似乎不起作用。

这很容易解释，但如果您没有数学背景，则有点难以理解。 (但是一个周末的维基百科阅读和谷歌搜索就足够了。这就是我学到的。)除了 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。

当您应用变换时，浏览器获取对象每个顶点的坐标(用非 Nerd 的话说:获取每个盒子 Angular 的坐标)并将其乘以变换矩阵。这个的乘积成为对象的新坐标。例如，从 (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]

那个乘积 [100 50 0 1] 转换成 3D 坐标系后就变成了我们开始时的样子:(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 坐标。转换效果显着。