Многие веб-разработчики в силу недопонимания не пользуются матрицей для CSS преобразований, используя взамен простейшие функции для трансформации, в то время как матрица преобразований обладает широкими возможностями. Давайте разберемся как как использовать ее на практике.
Матрица преобразований предназначена для вычисления новых координат элемента для последующей его трансформации. При этом выполняется условие: линии всегда должны быть параллельными, поэтому в качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения, но не перспектива, или нечто подобное. На рисунке ниже показаны как возможные, так и невозможные преобразования, сделанные с помощью матриц преобразований.
| Исходный элемент | | Поворот |
| Наклон | | Так сделать нельзя |
Сама матрица имеет размер 3х3 и в общем виде записывается так:
Иногда для простоты третью колонку опускают, поскольку она не оказывает влияния на конечный результат. Новые координаты каждой точки элемента после преобразования с помощью матрицы вычисляются по следующей формуле:
Роль каждого коэффициента матрицы представлена в таблице ниже:
Коэфф. |
Преобразование |
Описание |
a |
|
Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1 - сжимает. |
b |
|
Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо. |
c |
|
Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз. |
d |
|
Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 - сжимает. |
tx |
|
Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное - влево. |
ty |
|
Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз. При отрицательном значении - вверх. |
Для наглядности действие каждого коэффициента вы можете проверить на данной форме:
Матрица преобразований в браузерах
Для трансформации элемента применяется CSS стиль transform, который принимает в качестве значения ключевое слово matrix
, в котором перечисляются коэффициенты нашей матрицы преобразований.
transform: matrix(a, c, b, d, tx, ty)
Обратите внимание на порядок коэффициентов, это имеет принципиальное значение!
Как обычно, разные браузеры со свойствами CSS3 работают по своему, понимая их только с префиксами, поэтому приходится дублировать одну строку несколько раз.
-moz-transform: matrix(a, c, b, d, tx, ty); /* Firefox 3.5+ */
-webkit-transform: matrix(a, c, b, d, tx, ty); /* Safari 3.1+ и Chrome 2.0+ */
-o-transform: matrix(a, c, b, d, tx, ty); /* Opera 10.5+ */
-ms-transform: matrix(a, c, b, d, tx, ty); /* IE 9.0 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=a, M12=b, M21=c, M22=d,
Dx=tx, Dy=ty); /* IE 5.5+ */
Если вам нужна поддержка Internet Explorer до версии 9.0, то придется также использовать нестандартное свойство filter.
Единичная матрица
Если в матрице коэффициенты a и d равны 1, а остальные элементы матрицы нулевые, то такая матрица называется единичной. Эта матрица применяется по умолчанию, поскольку не приводит к какой-либо трансформации элемента. Поэтому, если вам нужно сделать только один вид преобразований, то берите за основу единичную матрицу.
Масштабирование
Чтобы увеличить размер элемента, скажем, в два раза по горизонтали, коэффициент a следует установить равным 2, а остальные коэффициенты оставить как в единичной матрице.
Считаем новые координаты:
x' = 2*x + 0*y + 0
y' = 0*x + 1*y + 0
И окончательно
x' = 2x
y' = y
/* Масштабирование */
-moz-transform: matrix(2, 0, 0, 1, 0, 0);
-webkit-transform: matrix(2, 0, 0, 1, 0, 0);
-o-transform: matrix(2, 0, 0, 1, 0, 0);
-ms-transform: matrix(2, 0, 0, 1, 0, 0);
Отражение
Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1, или эти значения одновременно для отражения и по горизонтали, и по вертикали.
/* Отражение */
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
-ms-transform: matrix(1, 0, 0, -1, 0, 0);
Наклон
За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим b=1 и посмотрим, какие преобразования получатся.
x' = 1*x + 0*y + 0
y' = 1*x + 1*y + 0
x' = x
y' = x + y
Таким образом, меняется только координата y, которая увеличивается на значение x, что и приводит к наклону элемента. В примере ниже мы сделали у коэффициента b отрицательное значение чтобы наклонить элемент вправо.
/* Наклон */
-moz-transform: matrix(1, 0, -0.5, 1, 0, 0);
-webkit-transform: matrix(1, 0, -0.5, 1, 0, 0);
-o-transform: matrix(1, 0, -0.5, 1, 0, 0);
-ms-transform: matrix(1, 0, -0.5, 1, 0, 0);
Поворот
Поворот представляет собой комбинацию масштабирования и наклона, но чтобы сохранить исходные пропорции элемента преобразования должны подчиняться строгим вычислениям с использование синусов и косинусов.
Сам поворот происходит по часовой стрелке, α задает угол поворота в градусах.
Перемещение
За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселов, Firefox, кроме того, единственный браузер, который поддерживает и другие единицы, например, em.
Перемещение само по себе применяется довольно редко из-за того, что в CSS для этого есть множество других средств, например позиционирование или отступы.
Подводим итоги
Как видите, матрица CSS преобразований довольно простой и эффективный инструмент трансформации в CSS. Конечно, применять их нужно не всегда (например, для поворота есть готовая функция rotate
). Тем не менее, для каких-то случаев вроде отражения элементов матрица преобразований просто незаменима.