Я хотел бы знать, как на самом деле работает WebKitCSSMatrix

Question

Официальная документация Apple говорит:

Объекты WebKitCSSMatrix представляют однородную матрицу 4x4 для трехмерных преобразований или вектор для двумерных преобразований. Вы можете использовать эти объекты для манипулирования матрицами в JavaScript. Например, вы можете умножать, переводить и масштабировать матрицы.

Я прославленный дизайнер, а не инженер, поэтому я предполагаю, что именно поэтому я не могу понять смысл этого описания. Пожалуйста, кто-нибудь может указать мне правильное направление, чтобы понять, как работает эта матрица и / или векторы?

Answer 1

Вот так, это самый сложный вопрос, на который я пытался ответить.Короткий ответ: у веб-дизайнеров нет слов для выражения трехмерных преобразований.Чтобы объяснить это вам понятным способом, я должен использовать математические понятия, которые я сам не понимаю.

Если вы хотите продолжить исследование, вы можете взглянуть на: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

Но я могу объяснить это визуально.http://duopixel.com/stack/webkitmatrix/ (это нужно будет посмотреть в Safari 5 со Snow Leopard, iPad или курсом).

То, что вы видите, это просто интерфейс с 16 значениями webkitCSSMatrix, ползунки, которые, кажется, ничего не делают, связаны с осью z, которая, я подозреваю, была бы видна, если бы у нас было больше объектов в3D-холст.

Редактировать: после изучения ссылки, которую я разместил ранее, я заметил, что оригинальный автор уже делал такой же пример раньше, дох!http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html

Answer 2

Несмотря на то, что это для ActionScript, посмотрите Понимание матрицы преобразования во Flash 8 . Там тоже красивые картинки:)

Прежде чем приступить к пониманию того, как работают матрицы преобразования (матрицы - это множественное число от матрицы), важно понять, что такое матрица. Матрица - это прямоугольный массив (или таблица) чисел, состоящий из любого количества строк и столбцов. Матрица, состоящая из m строк и n столбцов, называется матрицей m x n. Это представляет размеры матрицы. Обычно вы видите матрицы с числами в строках и столбцах, окруженные двумя большими скобками.

...

Аффинные преобразования - это преобразования, которые сохраняют коллинеарность и относительное расстояние в преобразованном координатном пространстве. Это означает, что точки на линии останутся на линии после применения аффинного преобразования к координатному пространству, в котором существует эта линия. Это также означает, что параллельные линии остаются параллельными, и что относительное расстояние или расстояние, хотя оно может масштабироваться, всегда будет поддерживать постоянное соотношение. Аффинные преобразования позволяют перемещать, масштабировать, наклонять и вращать. Вещи, которые они не могут сделать, включают сужение или искажение с точки зрения. Если вы когда-либо работали с преобразованием символов во Flash, вы, вероятно, узнаете эти качества.

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