Матрица преобразований - «CSS3» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 20 ноябрь 2024, 00:00
Данные всех россиян уже утекли в даркнет, заявил глава «Ростелекома» - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
29-03-2016, 12:12
Матрица преобразований - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3

Многие веб-разработчики игнорируют матрицу преобразований, полагая её слишком сложной для понимания и используя взамен простейшие функции для трансформации. И совершенно зря, матрица преобразований обладает широкими возможностями, вдобавок, в том или ином виде поддерживаются всеми браузерами, а значит её применение даёт кроссбраузерный код. Так что давайте разбираться, что это такое и как использовать матрицу преобразований на практике.

Трансформация

Сама матрица преобразований предназначена для вычисления новых координат элемента с целью его трансформации. При этом соблюдается условие, что линии всегда остаются параллельными, поэтому в качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения, но никак не перспектива или нечто подобное. На рис. 1 показаны допустимые и невозможные преобразования, сделанные с помощью матриц.




Исходный элемент Поворот Наклон А вот так сделать нельзя

Рис. 1. Трансформация элемента

Сама матрица имеет размер 3х3 и в общем виде записывается так:

 

Иногда для простоты третью колонку опускают, поскольку она не оказывает влияния на конечный результат. Новые координаты каждой точки элемента после преобразования с помощью матрицы вычисляются по следующей формуле:

 

Роль каждого коэффициента матрицы представлена в табл. 1.

Табл. 1. Коэффициенты матрицы преобразований
Коэффициент Преобразование Описание
a
Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1, наоборот, сжимает.
b
Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
c
Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз.
d
Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
tx
Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное значение сдвигает влево.
ty
Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз или вверх при отрицательном значении.

Для наглядности действие каждого коэффициента вы можете проверить на данной форме (в IE не работает).

 


Матрица преобразований в браузерах

Для трансформации элемента применяется стилевое свойство 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

Код для масштабирования показан в примере 1.

Пример 1. Масштабирование

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .t {
    background: #fc0;
    padding: 10px;
    width: 300px;
    -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);
   }
  </style>
 </head>
 <body>
  <div class="t">
   <p>То, что делает армию при встрече с противником непобедимой, 
      это правильный бой и маневр.</p>
   <p>Сунь-Цзы. Искусство войны. Пер. Н. Конрад.</p>
  </div>
 </body>
</html>

Отражение

Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1 или эти значения одновременно для отражения одним разом по горизонтали и вертикали.

 

В примере 2 показано отражение рисунка по вертикали.

Пример 2. Отражение

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .t {
    -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);
    opacity: 0.3;
   }
  </style>
 </head>
 <body>
  <p><thumb src="images/igels.png" alt="Ёжик"><br>
  <thumb src="images/igels.png" alt="Отражение" class="t"></p>
 </body>
</html>

Наклон

За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим b=1 и посмотрим, какие преобразования получатся.

 

x' = 1*x + 0*y + 0
y' = 1*x + 1*y + 0

x' = x
y' = x + y

Таким образом, меняется только координата y, которая увеличивается на значение x, что и приводит к наклону элемента. В примере 3 используется отрицательное значение коэффициента b для наклона вправо.

Пример 3. Наклон

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
  <style>
   .t {
    background: #fc0;
    padding: 10px;
    width: 400px;
    -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);
   }
  </style>
 </head>
 <body>
  <div class="t">
   <p>То, что делает армию при встрече с противником непобедимой, 
   это правильный бой и маневр.</p>
   <p>Сунь-Цзы. Искусство войны. Пер. Н. Конрад.</p>
  </div>
 </body>
</html>

Поворот

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

 

Сам поворот происходит по часовой стрелке, α задаёт угол поворота в градусах.

Перемещение

За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселов, Firefox, кроме того, единственный браузер, который поддерживает и другие единицы, например, em.

Перемещение само по себе применяется довольно редко из-за того, что в CSS для этого есть множество других средств, например позиционирование или отступы.

Резюме

Несмотря на некоторый ореол загадочности вокруг матрицы преобразований, на деле это довольно простой и эффективный инструмент трансформации в CSS. Конечно, применять матрицы нужно не всегда, например, для поворота есть готовая функция rotate, более простая и понятная в использовании, чем тригонометрические вычисления. Тем не менее, для каких-то случаев вроде отражения элементов матрица преобразований просто незаменима.


Многие веб-разработчики игнорируют матрицу преобразований, полагая её слишком сложной для понимания и используя взамен простейшие функции для трансформации. И совершенно зря, матрица преобразований обладает широкими возможностями, вдобавок, в том или ином виде поддерживаются всеми браузерами, а значит её применение даёт кроссбраузерный код. Так что давайте разбираться, что это такое и как использовать матрицу преобразований на практике. Трансформация Сама матрица преобразований предназначена для вычисления новых координат элемента с целью его трансформации. При этом соблюдается условие, что линии всегда остаются параллельными, поэтому в качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения, но никак не перспектива или нечто подобное. На рис. 1 показаны допустимые и невозможные преобразования, сделанные с помощью матриц. Исходный элемент Поворот Наклон А вот так сделать нельзя Рис. 1. Трансформация элемента Сама матрица имеет размер 3х3 и в общем виде записывается так: Иногда для простоты третью колонку опускают, поскольку она не оказывает влияния на конечный результат. Новые координаты каждой точки элемента после преобразования с помощью матрицы вычисляются по следующей формуле: Роль каждого коэффициента матрицы представлена в табл. 1. Табл. 1. Коэффициенты матрицы преобразований Коэффициент Преобразование Описание a Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1, наоборот, сжимает. b Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо. c Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз. d Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает. tx Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное значение сдвигает влево. ty Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз или вверх при отрицательном значении. Для наглядности действие каждого коэффициента вы можете проверить на данной форме (в IE не работает). a: b: c: d: tx: ty: Матрица преобразований в браузерах Для трансформации элемента применяется стилевое свойство transform, которое принимает в качестве значения ключевое слово matrix, внутри скобок перечисляются коэффициенты нашей матрицы преобразований. transform: matrix(a, c, b, d, tx, ty) Обратите внимание на порядок коэффициентов, это имеет принципиальное значение. Как обычно, разные браузеры со свойствами CSS3 работают по своему, понимая их только с префиксами, поэтому приходится дублировать одну строку несколько раз. Если вам нужна поддержка 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 Код для масштабирования показан в примере 1. Пример 1. Масштабирование Отражение Для отражение элемента по горизонтали следует установить a=-1, по вертикали d=-1 или эти значения одновременно для отражения одним разом по горизонтали и вертикали. В примере 2 показано отражение рисунка по вертикали. Пример 2. Отражение Наклон За наклон отвечают коэффициенты b и c, которые и влияют на вид элемента. Давайте установим b=1 и посмотрим, какие преобразования получатся. x' = 1*x 0*y 0 y' = 1*x 1*y 0 x' = x y' = x y Таким образом, меняется только координата y, которая увеличивается на значение x, что и приводит к наклону элемента. В примере 3 используется отрицательное значение коэффициента b для наклона вправо. Пример 3. Наклон Поворот Поворот является комбинацией масштабирования и наклона, но чтобы сохранить исходные пропорции элемента преобразования должны подчиняться строгим вычислениям с использование синусов и косинусов. Сам поворот происходит по часовой стрелке, α задаёт угол поворота в градусах. Перемещение За сдвиг элемента по горизонтали отвечает коэффициент tx, а по вертикали ty. Значением выступает число пикселов, Firefox, кроме того, единственный браузер, который поддерживает и другие единицы, например, em. Перемещение само по себе применяется довольно редко из-за того, что в CSS для этого есть множество других средств, например позиционирование или отступы. Резюме Несмотря на некоторый ореол загадочности вокруг матрицы преобразований, на деле это довольно простой и эффективный инструмент трансформации в CSS. Конечно, применять матрицы нужно не всегда, например, для поворота есть готовая функция rotate, более простая и понятная в использовании, чем тригонометрические вычисления. Тем не менее, для каких-то случаев вроде отражения элементов матрица преобразований просто незаменима.
Просмотров: 3 380
Комментариев: 0:   29-03-2016, 12:12
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР