我想知道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列組成的矩陣稱為m×n矩陣。 這代表矩陣的尺寸。 您將常見到包含兩個大括號符號的行和列中數字的矩陣。

...

仿射變換是在變換的坐標空間中保持共線性和相對距離的變換。 這意味着在將仿射變換應用於存在該行的坐標空間之后，線上的點將保持在一條線上。 它還意味着平行線保持平行，相對間距或距離雖然可以縮放，但始終保持一致的比例。 仿射變換允許重新定位，縮放，傾斜和旋轉。 他們不能做的事情包括逐漸減少或扭曲透視。 如果你曾經在Flash中使用變換符號，你可能會認識到這些特性。

_{（來源： senocular.com ）}