我想知道WebKitCSSMatrix如何實際工作

蘋果official documentation說：我想知道WebKitCSSMatrix如何實際工作

WebKitCSSMatrix對象代表一個4x4均勻矩陣3D變換或二維矢量變換。您可以使用這些對象來操作JavaScript中的矩陣。例如，您可以乘，翻譯和縮放矩陣。

我是一個榮耀的設計師，不是工程師，所以我假定這就是爲什麼我不能讓這樣的描述的任何意義的原因。請有人指出我正確的方向，以瞭解這個矩陣和/或向量如何工作？

2011-02-01 Soska

即使它是用於ActionScript的，請查看Understanding the Transformation Matrix in Flash 8。它也有漂亮的圖片:)

在深入瞭解變換矩陣（矩陣是多元矩陣）的工作之前，瞭解矩陣是什麼很重要。矩陣是由任意數量的行和列組成的數字的矩形陣列（或表格）。由m行和n列組成的矩陣稱爲m×n矩陣。這代表矩陣的尺寸。您通常會看到包含兩個大括號符號的行和列中的數字的矩陣。

...

仿射變換是保持共線性和相對疏遠的變換座標空間變換。這意味着一條線上的點將在仿射變換應用於該線所在的座標空間後保留在一條線上。這也意味着平行線保持平行，並且相對間距或距離雖然可以縮放，但始終保持在一致的比例。仿射變換允許重新定位，縮放，傾斜和旋轉。他們無法做的事情包括逐漸縮小或扭曲視角。如果你曾經在Flash中使用過變換符號，你可能會認識到這些特質。

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

來源

2011-02-01 23:07:46

吆，這是最困難的問題，我試圖回答。簡單的答案是，作爲網頁設計師，我們沒有詞彙來表達3D變換。爲了以可理解的方式向你解釋，我不得不使用數學概念，我不瞭解自己。

如果您想進一步的調查，你可以看看： http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

但是，我可以直觀地解釋它。 http://duopixel.com/stack/webkitmatrix/（您必須在Safari 5或Snow Leopard或iPad或課程中查看此內容）。 enter image description here

你看到的僅僅是16個值webkitCSSMatrix的界面，似乎什麼都不做滑塊都與Z軸，我懷疑將是可見的，如果我們在3D畫布上有多個對象。

編輯：在研究了我之前放置的鏈接後，我注意到原作者以前做過同樣的例子，doh！ http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html

來源

2011-02-02 02:00:29 Duopixel

非常感謝，玩了你的演示真的幫了我。 '.m41'是X軸（第4行第1列），'.m42'（第4行第2列）是Y軸。 – Drewid 2011-03-07 16:11:38

我想知道WebKitCSSMatrix如何實際工作

回答

相關問題