scaleZ() CSS 变换函数有什么作用? [英] What does the scaleZ() CSS transform function do?

问题描述

我正试图将我的小脑袋围绕在 3D CSS 转换上，但我无法理解 scaleZ() 函数的用途.

I’m trying to wrap my tiny brain around 3D CSS transforms, and I‘m having trouble understanding what the scaleZ() function is for.

scale()、scaleX() 和 scaleY() 有意义:它们沿着指定的轴拉伸元素，乘以它的维度按照您提供的数字沿该轴.

scale(), scaleX() and scaleY() make sense: they stretch the element along the axis specified, multiplying its dimension along that axis by the number you provide.

但是 scaleZ() 似乎不同:

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

WebKit 博客说:

[scaleZ()] 影响变换后的孩子中沿 z 轴的缩放.

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

我无法弄清楚这实际上意味着什么.谁能提供解释，最好附上一些示例代码?

I can’t figure out what this actually means in practice. Could anyone supply an explanation, preferably with some example code?

推荐答案

在提出问题两年后才回答这个问题似乎很愚蠢，但将其发布给后代.

Seems silly to answer a question two years after it was asked, but posting it for posterity.

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

It has to do with transform matrices and matrix-vector multiplication. Basically, the transform won't appear to work unless the math works out to produce a product where the Z coordinate is greater than zero.

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

This is easy to explain, but a little bit hard to understand if you don't have the math background. (But a weekend's worth of WikiPedia reading and Google searches will teach you enough. That's how I learned it.) Every transform function, except matrix() and matrix3d() have an equivalent matrix value. For scale3d, the matrix is:

[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.

Where sx, sy, and sz are the factor for scaling about the x, y, and z axes. For scaleZ, it's the same, but sx and sy are both 1.

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

When you apply a transform, the browser takes the coordinates for each vertex of the object (in non-nerd speak: takes the coordinates for each box corner) and multiplies it by the transform matrix. The product of this becomes the new coordinates for the object. For example the math of transform: scaleZ(3) on an object starting at (100,50,0) looks a little like this:

[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) 的矩阵.

That product, [100 50 0 1] when translated into a 3D coordinate system becomes what we started with: (100,50,0). The result is that it looks like the transform wasn't applied. In order for a transform using scaleZ() to have an effect, the third number in the product of the matrix and vector must be greater than zero. It usually happens when scaleZ() or scale3d() are applied to the parent element, or used in combination with another transform function. In both cases cumulative/current transform matrix results in a Z coordinate whose value is greater than zero. Here's an example using transform: rotateY(30deg) scaleZ(3). First we need to multiply the matrix for rotateY(30deg) by the matrix for 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) 处的点.

Then we can multiply our matrix product (that bit to the right of the equal sign) by our point at (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 坐标.变换效果显着.

Our product [86.6 50 49.9 1] works out to coordinates of (87, 50, 50) if we round off to whole numbers. And that second 50 is our Z coordinate. The transform has a noticeable effect.

这篇关于scaleZ() CSS 变换函数有什么作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！