当前位置：文江博客话题详情

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

发布于 2024-12-10 20:50:21 字数 565 浏览 0 评论 0原文

我正试图用我的小脑袋思考 3D CSS 变换，但我无法理解 scaleZ() 函数的用途。

scale()、scaleX() 和 scaleY() 有意义：它们沿指定的轴拉伸元素，沿该轴乘以元素的尺寸按您提供的号码。

但 scaleZ() 似乎有所不同：

它适用于元素的子元素
它不会影响子元素的尺寸，因为 HTML 元素沿 z 轴没有任何尺寸（即您无法使
“更厚”）。

WebKit 博客说：

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

我无法弄清楚这在实践中到底意味着什么。谁能提供解释，最好提供一些示例代码？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡忘如思 2024-12-17 20:50:21

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

它与变换矩阵和矩阵向量乘法有关。基本上，除非数学计算得出 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。

当你应用变换时，浏览器会获取对象每个顶点的坐标（用非书呆子的话来说：获取每个盒子角的坐标）并将其相乘通过变换矩阵。其乘积成为该对象的新坐标。例如，对于从 (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,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 坐标。改造效果显着。

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

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.

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]

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.

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]

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]

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  ]

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.

回复收藏 0 原文

转身泪倾城 2024-12-17 20:50:21

虽然经过实验，我对此感到困惑很长一段时间，但我相信这很容易理解：

假设一个元素位于 Z 轴上 100px 处，使其向观察者移动，如下所示：

div {
    transform: translateZ(100px);
}

然后将 Z 轴缩放二：

div {
    transform: scaleZ(2) translateZ(100px);
}

它的尺寸不会像你说的那样受到影响，但它现在的大小与 translateZ(200px) 相同。 scaleZ(2) translateZ(400px) 相当于 translateZ(800px) 等等。

您可以查看JSFiddle 上的演示。

不要认为 scaleZ() 会影响元素，而是会影响元素所在的 Z 轴。

最后一点：浏览器应该将多个转换函数视为单独应用，这意味着它们的顺序很重要。要使 scaleZ() 正常工作，必须将其放置在 translateZ() 之前，否则您只是在 Z 轴上移动元素，然后在没有任何视觉效果的情况下缩放轴结果。

I was confused about this for a long time although having experimented, I believe it's quite easy to understand:

Assume an element is positioned 100px on the Z axis, making it move toward the viewer, like so:

div {
    transform: translateZ(100px);
}

And you then scale the Z axis by two:

div {
    transform: scaleZ(2) translateZ(100px);
}

Its dimensions aren't affected as you say, but it will now be the same size as if it were translateZ(200px). scaleZ(2) translateZ(400px) is the equivalent of translateZ(800px) and so on.

You can see a demonstration of this on JSFiddle.

Don't think of scaleZ() affecting the element but instead the Z axis which the element is on.

One final note: a browser should treat multiple transform functions as if they are being applied separately, which means their order is important. For scaleZ() to work, it must be placed before translateZ(), else you're just moving the element on the Z axis and then scaling the axis without any visual result.

回复收藏 0 原文

朱染 2024-12-17 20:50:21

网页X、Y 和中有三个视图。 Z 就像 z-index 一样，因为它与 scaleZ() 相同。

检查w3c所说的

scale(<number>[, <number>])
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
scale3d(<number>, <number>, <number>)
specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleX(<number>)
specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter.
scaleZ(<number>)
specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

检查您的链接动画http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

编辑：

你的小提琴仍然没有解释什么是< code>scaleZ() 因为我们也可以从 scaleY() 获得这种效果。

检查这个小提琴 http://jsfiddle.net/sandeep/dppNn/

现在在我的小提琴示例中，您可以第 3 个数字框 看起来像 3D 表示，其中包含 scaleX()、scaleY() & scaleZ() & 第二个数字框 看起来像 2D，因为它们仅缩放scaleX() &缩放Y()。

there are three views in over webpage X, Y & Z like for example z-index as it's same thing the scaleZ().

Check what w3c say

scale(<number>[, <number>])
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
scale3d(<number>, <number>, <number>)
specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleX(<number>)
specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter.
scaleZ(<number>)
specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

check your link animation http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

EDIT:

your fiddle still not explain what is scaleZ() because we can get that effect from scaleY() also.

Check this fiddle http://jsfiddle.net/sandeep/dppNn/

Now in my fiddle example you can the 3rd digit box look like 3D means with scaleX(),scaleY() & scaleZ() & 2nd digit box look like 2D because they scale only scaleX() & scaleY().

回复收藏 0 原文