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

Question

Apple的official documentation说：

  

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，也请查看Understanding the Transformation Matrix in Flash 8。它也有漂亮的照片：）

  

在了解转换矩阵（矩阵是多个矩阵）的工作原理之前，了解矩阵是什么很重要。矩阵是由任意数量的行和列组成的矩形数组（或表）。由m行和n列组成的矩阵称为m×n矩阵。这代表矩阵的尺寸。你会经常看到包含两个大括号符号的行和列中数字的矩阵。

     

...

     

仿射变换是在变换的坐标空间中保持共线性和相对距离的变换。这意味着在将仿射变换应用于存在该行的坐标空间之后，线上的点将保持在一条线上。它还意味着平行线保持平行，相对间距或距离虽然可以缩放，但始终保持一致的比例。仿射变换允许重新定位，缩放，倾斜和旋转。他们不能做的事情包括逐渐减少或扭曲透视。如果你曾经在Flash中使用变换符号，你可能会认识到这些特性。

     

http://www.senocular.com/flash/tutorials/transformmatrix/images/t_affine.jpg