Chciałbym wiedzieć, jak faktycznie działa WebKitCSSMatrix mówi

Question

Apple official documentation:

obiekty WebKitCSSMatrix stanowią jednorodną macierz 4x4 dla 3D przekształca lub wektor 2D przemienia. Możesz użyć tych obiektów do manipulowania matrycami w JavaScript. Na przykład możesz mnożyć, tłumaczyć i skalować matryce.

Jestem gloryfikowanym projektantem, a nie inżynierem, więc zakładam, że to jest powód, dla którego nie mogę zrozumieć tego opisu. Proszę, czy ktoś może wskazać mi właściwy kierunek, aby zrozumieć, jak działa ta matryca i/lub wektory?

Answer 1

Mimo że dotyczy to ActionScript, sprawdź numer Understanding the Transformation Matrix in Flash 8. Ma też ładne zdjęcia :)

Zanim przejdziemy do tego, jak działają macierze transformacji (macierze są mnogimi macierzy), ważne jest zrozumienie, czym jest macierz. Macierz to prostokątna tablica (lub tabela) liczb składająca się z dowolnej liczby wierszy i kolumn. Macierz składająca się z m wierszy i n kolumn znana jest jako macierz m x n. Reprezentuje wymiary matrycy. Będziesz często widział matryce z liczbami w rzędach i kolumnach otoczonych dwoma dużymi symbolami nawiasów.

...

transformacje afiniczne są transformacje zachowujące kolinearność i względnego dystansu w przekształconej współrzędnych przestrzeni. Oznacza to, że punkty na linii pozostaną w linii po tym, jak transformacja afiniczna zostanie zastosowana do przestrzeni współrzędnych, w której ta linia istnieje. Oznacza to również, że równoległe linie pozostają równoległe i że względne odstępy lub dystanse, choć mogą być skalowane, zawsze utrzymują się na stałym poziomie. Transformacje afiniczne umożliwiają repozycjonowanie, skalowanie, pochylanie i rotację. Rzeczy, których nie mogą zrobić, to zwężanie lub zniekształcanie z perspektywą. Jeśli kiedykolwiek pracowałeś nad transformowaniem symboli we Flashu, prawdopodobnie rozpoznajesz te cechy.

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

Answer 2

Uff, to jest najtrudniejsze pytanie jakie próbowali odpowiedzieć. Krótka odpowiedź brzmi, że jako projektanci stron internetowych nie mamy słownictwa wyrażającego transformacje 3d. Aby ci to wyjaśnić w zrozumiały sposób, musiałbym użyć pojęć matematycznych, których sam nie rozumiem.

Jeśli chcesz zbadać dalej można spojrzeć na: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Ale mogę to wyjaśnić wizualnie. http://duopixel.com/stack/webkitmatrix/ (musisz to zobaczyć pod Safari 5 w/Snow Leopard, lub iPad lub oczywiście).

Co widzisz jest tylko interfejs do webkitCSSMatrix 16 wartości, suwaki, które wydają się zrobić nic, odnoszą się do osi Z, który podejrzewam byłoby widoczne, gdybyśmy mieli więcej obiektów w 3D płótnie .

Edytuj: po przestudiowaniu linku, który umieściłem wcześniej, zauważyłem, że oryginalny autor zrobił wcześniej ten sam przykład, doh! http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html