Багато веб-розробники в силу непорозуміння не користуються матрицею для CSS перетворень, використовуючи замість найпростіші функції для трансформації, в той час як матриця перетворень має широкі можливості. Давайте розберемося як використання її на практиці.
Матриця перетворень призначена для обчислення нових координат елемента для подальшої його трансформації. При цьому виконується умова: лінії завжди повинні бути паралельними, тому в якості трансформації допустимі поворот, масштабування, нахил і зміна положення, але не перспектива, чи щось подібне. На малюнку нижче показані як можливі, так і неможливі перетворення, зроблені за допомогою матриць перетворень.
Так зробити не можна
Сама матриця має розмір 3х3 і в загальному вигляді записується так:
Іноді для простоти третю колонку опускають, оскільки вона не впливає на кінцевий результат. Нові координати кожної точки елемента після перетворення за допомогою матриці обчислюються за такою формулою:
Роль кожного коефіцієнта матриці представлена в таблиці нижче:
Зміна масштабу по горизонталі. Значення більше 1 розширює елемент, менше 1 - стискає.
Горизонтального нахилу. Позитивне значення нахиляє вліво, негативне вправо.
Нахил по вертикалі. Позитивне значення нахиляє вгору, негативне вниз.
Зміна масштабу по вертикалі. Значення більше 1 розширює елемент, менше 1 - стискає.
Зсув по горизонталі в пікселях. Позитивне значення зрушує елемент вправо на задане число пікселів, негативне - вліво.
Зсув по вертикалі в пікселах. При позитивному значенні елемент опускається на задане число пікселів вниз. При від'ємному значенні - вгору.
Для наочності дію кожного коефіцієнта ви можете перевірити на даній формі:
Матриця перетворень в браузерах
Для трансформації елемента застосовується CSS стиль transform. який приймає в якості значення ключове слово matrix. в якому перераховуються коефіцієнти нашої матриці перетворень.
Зверніть увагу на порядок коефіцієнтів, це має принципове значення!
Як завжди, різні браузери з властивостями CSS3 працюють по своєму, розуміючи їх тільки з префіксами, тому доводиться дублювати один рядок кілька разів.
Якщо вам потрібна підтримка Internet Explorer до версії 9.0, то доведеться також використовувати нестандартне властивість filter.
Одинична матриця
Якщо в матриці коефіцієнти a і d рівні 1, а інші елементи матриці нульові, то така матриця називається одиничною. Ця матриця застосовується за умовчанням, оскільки не призводить до будь-якої трансформації елемента. Тому, якщо вам потрібно зробити тільки один вид перетворень, то беріть за основу одиничну матрицю.
масштабування
Щоб збільшити розмір елемента, скажімо, в два рази по горизонталі, коефіцієнт a слід встановити рівним 2, а інші коефіцієнти залишити як в одиничній матриці.
Вважаємо нові координати:
x '= 2 * x + 0 * y + 0
y '= 0 * x + 1 * y + 0
Для відображення елемента по горизонталі слід встановити a = -1. по вертикалі d = -1. або ці значення одночасно для відображення і по горизонталі, і по вертикалі.
За нахил відповідають коефіцієнти b і c. які і впливають на вигляд елемента. Давайте встановимо b = 1 і подивимося, які перетворення вийдуть.
x '= 1 * x + 0 * y + 0
y '= 1 * x + 1 * y + 0
Таким чином, змінюється тільки координата y. яка збільшується на значення x. що і призводить до нахилу елемента. У прикладі нижче ми зробили у коефіцієнта b від'ємне значення щоб нахилити елемент вправо.
Поворот являє собою комбінацію масштабування і нахилу, але щоб зберегти вихідні пропорції елемента перетворення повинні підкорятися строгим обчислень з використання синусів і косинусів.
Сам поворот відбувається за годинниковою стрілкою, α задає кут повороту в градусах.
переміщення
За зрушення елемента по горизонталі відповідає коефіцієнт tx. а по вертикалі ty. Значним виступає число пікселів, Firefox, крім того, єдиний браузер, який підтримує і інші одиниці, наприклад, em.
Переміщення саме по собі застосовується досить рідко через те, що в CSS для цього є безліч інших засобів, наприклад позиціонування або відступи.
підводимо підсумки
Як бачите, матриця CSS перетворень досить простий і ефективний інструмент трансформації в CSS. Звичайно, застосовувати їх потрібно не завжди (наприклад, для повороту є готова функція rotate). Проте, для якихось випадків на кшталт відображення елементів матриця перетворень просто незамінна.
- unity
- unity
- unity
- unity
- unity
- unity
- unity
- unity