我想知道WebKitCSSMatrix实际上是如何工作的

Question

Apple的官方文档说:

WebKitCSSMatrix对象表示用于3D变换的4x4均匀矩阵或用于2D变换的矢量.您可以使用这些对象来操纵JavaScript中的矩阵.例如,您可以对矩阵进行乘法,平移和缩放.

我是一位荣耀的设计师,而不是工程师,所以我认为这就是我无法理解这种描述的原因.请问,有人能指出我正确的方向来理解这个矩阵和/或向量是如何工作的吗？

Answer 1

哇,这是我试图回答的最难的问题.简短的回答是,作为网页设计师,我们没有表达3d变换的词汇.为了以一种易于理解的方式向你解释,我必须使用我自己不了解的数学概念.

如果您想进一步调查,可以查看:http: //www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

但是,我可以直观地解释它. http://duopixel.com/stack/webkitmatrix/(您必须在Safari 5 w/Snow Leopard,iPad或课程下查看此内容).

您所看到的只是16个值webkitCSSMatrix的接口,似乎什么都不做的滑块与z轴相关,如果我们在3d画布中有更多对象,我怀疑它是可见的.

编辑:在研究我之前放置的链接后,我注意到原作者之前做过相同的例子,doh!http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html

Answer 2

尽管它适用于 ActionScript，但请查看了解 Flash 8 中的变换矩阵。它还有漂亮的照片：）

在了解变换矩阵（矩阵是矩阵的复数）如何工作之前，了解什么是矩阵非常重要。矩阵是由任意数量的行和列组成的矩形数字数组（或表格）。由 m 行和 n 列组成的矩阵称为 mxn 矩阵。这表示矩阵的维度。您通常会看到矩阵的行和列中的数字被两个大括号符号包围。

...

仿射变换是在变换的坐标空间中保持共线性和相对距离的变换。这意味着在将仿射变换应用于该线所在的坐标空间后，线上的点将保留在该线上。这也意味着平行线保持平行，并且相对间距或距离虽然可能会缩放，但始终保持一致的比例。仿射变换允许重新定位、缩放、倾斜和旋转。他们不能做的事情包括逐渐缩小或扭曲视角。如果您曾经在 Flash 中处理过符号转换，您可能会认识到这些品质。

_{（来源：senoptic.com）}