I would like to know how WebKitCSSMatrix works

Question

Apple official documentation says:

WebKitCSSMatrix objects are a homogeneous 4x4 matrix for 3D transforms or a vector for two-dimensional transformations. You can use these objects to control matrices in JavaScript. For example, you can multiply, translate, and scale matrices.

I am a renowned designer, not an engineer, so I assume that the reason I can not understand this description. Please can someone point me in the right direction to understand how this matrix and / or vectors work?

Answer 1

Few, this is the most difficult question I tried to answer. Short answer: web designers have no words to express three-dimensional transformations. To explain this to you in an understandable way, I will have to use mathematical concepts that I myself do not understand.

If you want to continue the investigation, you can take a look at: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

But I can explain it visually. http://duopixel.com/stack/webkitmatrix/ (this will need to be seen in Safari 5 with Snow Leopard, iPad or course).

What you see is just an interface with 16 webkitCSSMatrix values, sliders that don't seem to do anything are associated with the z axis, and I suspect it would be visible if we had more objects on a three-dimensional canvas.

Change: after examining the link that I posted earlier, I noticed that the original author did the same example before, doh! http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html

Answer 2

Although this is for ActionScript, check out Understanding the Transformation Matrix in Flash 8 . There are also beautiful pictures :)

Before you begin to understand how transformation matrices work (matrices are the plural of a matrix), it is important to understand what a matrix is. A matrix is ​​a rectangular array (or table) of numbers consisting of any number of rows and columns. A matrix of m rows and n columns is called a mx n matrix. This represents the dimensions of the matrix. Usually you see matrices with numbers in rows and columns, surrounded by two large brackets.

...

Affine transformations are transformations that preserve collinearity and relative distance in the transformed coordinate space. this means that the points on the line will remain on the line after applying the affine transformation to the coordinate space in which this line exists. It also means that the parallel lines remain parallel, and that the relative distance or distance, although it can be scaled, will always maintain a constant ratio. Affine transformations allow you to move, scale, tilt and rotate. Things that they cannot do include narrowing or distortion in terms. If you've ever worked with character conversion in Flash, you'll probably recognize these qualities.

_{(source: senocular.com )}