Tôi muốn biết làm thế nào WebKitCSSMatrix thực sự hoạt động

Question

của official documentation Apple nói:

đối tượng WebKitCSSMatrix đại diện cho một 4x4 ma trận đồng nhất cho biến đổi 3D hoặc một vector cho 2D biến. Bạn có thể sử dụng các đối tượng này để thao tác ma trận trong JavaScript. Ví dụ: bạn có thể nhân, dịch và tỷ lệ ma trận.

Tôi là một nhà thiết kế vinh quang, không phải là kỹ sư, vì vậy tôi cho rằng đó là lý do tại sao tôi không thể hiểu được mô tả đó. Xin vui lòng, ai đó có thể chỉ cho tôi đi đúng hướng để hiểu cách ma trận và/hoặc vectơ này hoạt động như thế nào?

Answer 1

Mặc dù nó dành cho ActionScript, hãy xem Understanding the Transformation Matrix in Flash 8. Nó cũng có hình ảnh đẹp, quá :)

Trước khi tiến hành ma trận chuyển đổi (ma trận là ma trận số nhiều), điều quan trọng là hiểu ma trận là gì. Ma trận là một mảng hình chữ nhật (hoặc bảng) của các số bao gồm bất kỳ số hàng và cột nào. Một ma trận gồm m hàng và n cột được gọi là ma trận m x n. Điều này đại diện cho các kích thước của ma trận. Bạn sẽ thường thấy các ma trận với các số trong hàng và cột được bao quanh bởi hai biểu tượng khung lớn.

...

Biến đổi quan trọng là biến đổi bảo toàn collinearity và tương đối xa trong không gian tọa độ được chuyển đổi. Điều này có nghĩa là các điểm trên một dòng sẽ vẫn nằm trong một dòng sau khi phép biến đổi affine được áp dụng cho không gian tọa độ mà dòng đó tồn tại. Nó cũng có nghĩa là các đường song song vẫn song song và khoảng cách hoặc khoảng cách tương đối, mặc dù nó có thể mở rộng, sẽ luôn duy trì ở một tỷ lệ nhất quán. Biến đổi affine cho phép tái định vị, chia tỷ lệ, lệch và xoay. Những điều họ không thể làm bao gồm cắt giảm hoặc bóp méo với quan điểm. Nếu bạn đã từng làm việc với các biểu tượng chuyển đổi trong Flash, bạn có thể nhận ra những phẩm chất này.

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

Answer 2

Whew, đây là câu hỏi khó nhất mà tôi đã cố gắng để trả lời. Câu trả lời ngắn gọn là, với tư cách là nhà thiết kế web, chúng tôi không có vốn từ vựng để thể hiện chuyển đổi 3d. Để giải thích nó cho bạn một cách dễ hiểu, tôi phải sử dụng các khái niệm toán học mà tôi không hiểu bản thân mình.

Nếu bạn muốn điều tra thêm, bạn có thể có một cái nhìn tại địa chỉ: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Nhưng, tôi có thể giải thích nó bằng mắt thường. http://duopixel.com/stack/webkitmatrix/ (bạn sẽ phải xem mục này trong Safari 5 w/Snow Leopard hoặc iPad hoặc khóa học).

Những gì bạn thấy chỉ là giao diện cho 16 giá trị webkitCSSMatrix, thanh trượt dường như không liên quan gì đến trục z, mà tôi nghi ngờ sẽ hiển thị nếu chúng tôi có nhiều đối tượng hơn trong canvas 3d .

Chỉnh sửa: sau khi nghiên cứu liên kết tôi đã đặt trước đó, tôi nhận thấy tác giả gốc đã làm ví dụ tương tự trước đây, doh! http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html