16

我正在尝试将我的小大脑包裹在 3D CSS 变换周围，但我无法理解该scaleZ()函数的用途。

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

但scaleZ()似乎不同：

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

WebKit 博客说：

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

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

4

4 回答 4

20

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

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

当您应用变换时，浏览器获取对象每个顶点的坐标（用非书呆子的话说：获取每个框角的坐标）并将其乘以变换矩阵。其乘积成为对象的新坐标。例如，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]

该乘积 [100 50 0 1] 在转换为 3D 坐标系时变成了我们开始的结果：(100,50,0)。结果是看起来好像没有应用转换。为了使使用 scaleZ() 的变换产生效果，矩阵和向量乘积中的第三个数字必须大于零。它通常发生在 scaleZ() 或 scale3d() 应用于父元素或与另一个变换函数结合使用时。在这两种情况下，累积/当前变换矩阵都会导致 Z 坐标的值大于零。这是一个使用transform: rotateY(30deg) scaleZ(3). 首先，我们需要将矩阵 for 乘以rotateY(30deg)矩阵 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) 处的点。

[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 坐标。变换有明显的效果。

于 2013-02-21T03:08:47.117 回答
4

对此我困惑了很久，虽然做了实验，但相信还是很容易理解的：

假设一个元素位于 Z 轴 100px 处，使其向查看器移动，如下所示：

div {
    transform: translateZ(100px);
}

然后将 Z 轴缩放 2：

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

它的尺寸并没有像你说的那样受到影响，但它现在的大小就像它一样translateZ(200px)。scaleZ(2) translateZ(400px)是等价的translateZ(800px)。

您可以在 JSFiddle 上看到一个演示。

不要考虑scaleZ()影响元素，而是考虑元素所在的 Z 轴。

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

于 2012-06-29T13:26:49.373 回答
3

例如three views，在网页上有很多，因为它与.X, Y & Zz-indexscaleZ()

看看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

编辑：

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

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

现在在我的小提琴示例中，您可以使用&3rd digit box看起来像 2D，因为它们仅缩放 scaleX() 和 scaleY()。3D meansscaleX(),scaleY() & scaleZ()2nd digit box

于 2011-10-19T10:39:03.780 回答
0

Apple 的Safari CSS 视觉效果指南 是这样解释scaleZ()的：

您可以通过缩放 z 轴来修改元素后代的坐标系，以便沿 z 轴的距离更大或更小。这种缩放只影响元素的后代，并且缩放需要启用 3D 变换，因此 z 轴缩放需要至少两个 3D 层。[强调我的]

所以，据我了解，当：

  1. 你有两个 3D 图层，并且
  2. 内在的已经scaleZ()应用于它

然后当内层的后代对其应用 3D 变换时，它们沿 z 轴的移动将乘以您传递给的值scaleZ()。或者其他的东西。

我在 JSFiddle 上弹出了一个示例。如果您删除-webkit-transform: scaleZ(3);，则蓝色框适合灰色框，因为它不会沿 z 轴移动太多。（我认为。）

于 2011-10-19T11:15:42.597 回答