什么是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.

规模（），的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轴的任何尺寸（例如，你不能让一个＆LT; D​​IV＆GT; 厚）。

1. It applies to children of the element
2. It doesn’t affect the dimensions of the child elements, as HTML elements don’t have any dimension along the z-axis (i.e. you can’t make a <div> "thicker").

WebKit的博客说：

[ scaleZ（）]影响沿z轴的缩放在转化的孩子。

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

我想不出什么这实际上意味着在实践中。任何人都可以提供一个解释，preferably一些例如code？

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.

这是很容易解释，但有点费解，如果你没有数学的背景。 （但是，维基百科阅读和谷歌搜索的周末的价值将教你就够了。这就是我学会了它。）每变换的功能，除了矩阵（）和的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] 

其中S X，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.

在应用转换时，浏览器不为对象的每个顶点的坐标（非书呆子讲：取坐标每个箱子的角落），并通过变换矩阵相乘。这样做的产品成为该对象的新坐标。例如的数学变换：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]时，转换成三维坐标系统成为我们之前的：（100,50,0）​​。其结果是，它看起来像变换不施加。为了使采用scaleZ（）具有的效果的变换，在矩阵和向量的乘积的第三数目必须大于零。它通常发生在scaleZ（）或scale3d（）被应用到父元素，或组合使用另一变换函数。在这两种情况下的累积/电流变换矩阵将导致在Z坐标的值是大于零。下面是使用的例子变换：rotateY（30度）scaleZ（3）。首先，我们需要乘以矩阵 rotateY（30度）的矩阵 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屋！