Mi piacerebbe sapere come funziona realmente WebKitCSSMatrix

Question

di Apple official documentation dice:

oggetti WebKitCSSMatrix rappresentano una matrice 4x4 omogeneo per il 3D trasforma o un vettore per il 2D si trasforma. Puoi usare questi oggetti per manipolare le matrici in JavaScript. Ad esempio, puoi moltiplicare, tradurre e ridimensionare le matrici.

Sono un designer glorificato, non un ingegnere, quindi presumo che sia il motivo per cui non riesco a dare un senso a quella descrizione. Per favore, qualcuno può indicarmi la giusta direzione per capire come funzionano questa matrice e/o i vettori?

Answer 1

Anche se è per ActionScript, controlla Understanding the Transformation Matrix in Flash 8. Anche le foto sono belle :)

Prima di entrare nel modo in cui le matrici di trasformazione (le matrici sono plurali di matrice) funzionano, è importante capire che cos'è una matrice. Una matrice è una matrice (o tabella) rettangolare composta da un numero qualsiasi di righe e colonne. Una matrice costituita da m righe e n colonne è nota come matrice m x n. Questo rappresenta le dimensioni della matrice. Vedrai comunemente matrici con numeri in righe e colonne circondate da due simboli di parentesi quadra.

...

trasformazioni affini sono trasformazioni che preservano collinearità e relativo allontanamento in uno spazio di coordinate trasformate. Ciò significa che i punti su una linea rimarranno in una linea dopo che una trasformazione affine viene applicata allo spazio di coordinate in cui esiste quella linea. Significa anche che le linee parallele rimangono parallele e che la spaziatura o il distanziamento relativo, sebbene possa scalare, manterrà sempre in un rapporto costante. Le trasformazioni affini consentono riposizionamento, ridimensionamento, inclinazione e rotazione. Le cose che non possono fare includono il tapering o la distorsione con la prospettiva. Se hai mai lavorato con la trasformazione dei simboli in Flash, probabilmente riconosci queste qualità.

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

Answer 2

Accidenti, questa è la domanda più difficile che ho cercato di rispondere. La risposta breve è che, come web designer, non abbiamo il vocabolario per esprimere le trasformazioni in 3d. Per spiegartelo in un modo comprensibile dovrei usare concetti matematici che non capisco da solo.

Se desideri approfondire è possibile dare un'occhiata a: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Ma, posso spiegare visivamente. http://duopixel.com/stack/webkitmatrix/ (sarà necessario visualizzarlo in Safari 5 con Snow Leopard o iPad o corso).

Quello che stai vedendo è solo un'interfaccia al 16 valori webkitCSSMatrix, i cursori che sembrano fare nulla sono legati l'asse z, che ho il sospetto sarebbe visibile se avessimo più oggetti nella tela 3d .

Modifica: dopo aver studiato il collegamento che ho inserito prima, ho notato che l'autore originale ha già fatto lo stesso esempio, doh! http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html