我想知道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如何实际工作

回答

相关问题