![Утеряна Документация Или Преобразование: Матрица3D [Перевод]](/assets/images/logos/logo-white.webp "Утеряна Документация Или Преобразование: Матрица3D [Перевод]"){kind=logo}
Когда ты ныряешь к документации о преобразовании CSS3: матрица3d вы найдете краткое определение «Определяет трехмерное преобразование как матрицу 4x4», за которым следует определение функции в форме: matrix3d(m00, m01, m02, m03,
m10, m11, m12, m13,
m20, m21, m22, m23,
m30, m31, m31, m33)
И если вы не бог математики, вероятно, внутри вас возникает чувство беспокойства по поводу отсутствия документации, за которым следует вопрос, как построить что-то действительно крутое? Описанный подход не претендует на звание математического или законченного — я просто пытаюсь восполнить небольшой пробел в документации.
Немного линейной алгебры
Любое сложное преобразование можно представить тремя основными: Поворот Масштабирование Переместить (перевести) Эти три базовых преобразования можно объединить в одну огромную всеобъемлющую матрицу преобразований.Пока все просто, но как пройти от 3-х базовых шагов до необузданного списка параметров, которые необходимы для работы матрицы3d? Начнем с самой простой матрицы в математике (чтобы облегчить себе жизнь, я использую Сильвестр для математических операций с матрицами).
Единичная матрица
![Утеряна документация или преобразование: матрица3d [перевод]](https://habrastorage.org/r/w1560/getpro/habr/post_images/8d3/628/8a1/8d36288a14d1b4d3c0d4996cea4d4c19.png "Утеряна документация или преобразование: матрица3d [перевод]")
Эта матрица ничего не делает! Ноль! Нулевой! Нада! Ни один пиксель не пострадал! Я разделил эту матрицу на 2 части.
Красная секция — это область, где описаны поворот и масштабирование.
Желтый раздел описывает сдвиг или перевод (перевод).
Остальные параметры используются крайне редко, за исключением действительно странных демок эффектов в стиле LSD. Мы начнем с создания матрицы масштабирования путем умножения единичной матрицы на коэффициент масштабирования.
ScaleMatrix = indentityMatrix.multiply(s)
Масштабирующая матрица
масштабМатрица = $M([ [с,0,0,0], [0,с,0,0], [0,0,с,0], [0,0,0,с] ]) Поскольку мы не хотим преобразовывать координаты перемещения, давайте изменим последний параметр масштабирования на 1: масштабМатрица = $M([ [с,0,0,0], [0,с,0,0], [0,0,с,0], [0,0,0,1] ])Поворот матриц
Вращение может осуществляться вокруг собственной оси X, Y, Z на заданный угол.Примем значения углов для каждой оси как a, b, c. Соответствующие матрицы, представляющие такое преобразование: вращениеXMatrix = $M([ [1,0,0,0], [0,Math.cos(a), Math.sin(-a), 0], [0,Math.sin(a), Math.cos(a), 0], [0,0,0,1] ]) вращениеYMatrix = $M([ [Math.cos(b), 0, Math.sin(b),0], [0,1,0,0], [Math.sin(-b), 0, Math.cos(b), 0], [0,0,0,1] ]) вращениеZMatrix = $M([ [Math.cos(c), Math.sin(-c), 0, 0], [Math.sin(c), Math.cos(c), 0, 0], [0,0,1,0], [0,0,0,1] ]) Каждая матрица описывает вращение вокруг одной оси.
Матрица движения (перевести)
TranslationMatrix = $M([ [1,0,0,0], [0,1,0,0], [0,0,1,0], [TX, Ty, tz, 1] ]) Матрица перевода не влияет на большинство пикселей, но добавляет значения tx, ty и tz к результирующему вектору направления.
Веселье
Да, математика может быть интересной, и каждую из этих матриц можно использовать в композиции.Итак, если вам нужно что-то повернуть вокруг каждой оси, а затем переместить на несколько пикселей, просто перемножьте эти матрицы.
Вот и все: tM = матрица вращенияX .
x(матрица вращенияY) .
x(вращениеZMatrix) .
x(Матрица масштаба) .
x(матрица перевода) И, наконец, примените преобразование к изображению: s = "matrix3d(" s += tM.e(1,1).
toFixed(10) + "," + tM.e(1,2).
toFixed(10) + "," + tM.e(1,3).
toFixed( 10) + "," + tM.e(1,4).
toFixed(10) + "," s += tM.e(2,1).
toFixed(10) + "," + tM.e(2,2).
toFixed(10) + "," + tM.e(2,3).
toFixed( 10) + "," + tM.e(2,4).
toFixed(10) + "," s += tM.e(3,1).
toFixed(10) + "," + tM.e(3,2).
toFixed(10) + "," + tM.e(3,3).
toFixed( 10) + "," + tM.e(3,4).
toFixed(10) + "," s += tM.e(4,1).
toFixed(10) + "," + tM.e(4,2).
toFixed(10) + "," + tM.e(4,3).
toFixed( 10) + "," + tM.e(4,4).
toFixed(10) с += ")" document.getElementById('darth-vader').
style['-webkit-transform'] = s
Предостережения
Во-первых, если вы погуглите линейное преобразование и найдете примеры таких матриц, вы можете удивиться, что матрицы немного отличаются.Дело в том, что CSS-матрица транспонируется — все просто, транспонируйте матрицу и должно работать.
Во-вторых, CSS не поддерживает научную форму чисел (например, 123e-15) в качестве параметров, поэтому вам нужно использовать toFixed(numberOfDigits) для их нормализации.
Среда разработки
Этот подход работает в браузерах -webkit-, таких как Chrome или Safari, Firefox 10+ и IE 10. Префиксы можно найти здесь.Демо-версия работает только в -webkit- и написана на кофейный сценарий что немного круче, чем javascript, но скомпилированный код должен быть читаемым.
Весь урок и исходники можно найти на сайте github .
Демо Оригинальная статья Фейсбук автора Твиттер автора Потрясающая библиотека Javascript Sylvester Статья в Википедии о линейных преобразованиях Теги: #w3c #css3 #matrix3d #Разработка сайтов
-
Приглашаем Вас На Python Meetup 22 Сентября.
19 Oct, 24 -
Firefox 4 И Windows Aero
19 Oct, 24 -
Введение В Rxjava: Почему Rx?
19 Oct, 24 -
Google-Мэшап
19 Oct, 24
