Матричні функції - matrix () and matrix3d () - дві найбільші головоломні в плані розуміння штуковини в CSS3-трансформаціях. У більшості випадків, заради простоти і ясності, ви будете користуватися функціями на зразок rotate () і skewY (). Але все ж за кожною трансформацією ховається еквівалентна матриця. Корисно хоч злегка розуміти, як вони працюють, так що давайте поглянемо.
У цій статті я охоплю як матриці 3 на 3, які використовуються для двовимірних трансформацій, так і матриці 4 на 4 для тривимірних.
У цій статті я також користуюся беспрефікснимі версіями властивостей transform. На практиці ці властивості все ще експериментальні і можуть змінитися. Поки вони не затверджені остаточно, додавайте в свій CSS-код версії з префіксом (напр. -o-transform).
Що таке матриця?
Матриця - це прикольний математичний термін для прямокутного масиву чисел, символів або виразів (див. Рис. 1). У матриць безліч математичних і наукових застосувань. Фізики, наприклад, використовують їх при вивченні квантової механіки. В області комп'ютерної графіки вони використовуються для речей типу - раптово! - лінійних трансформацій і проекції тривимірних зображень на двовимірний екран. Це і є те, що роблять матричні функції: matrix () дозволяє нам створювати лінійні трансформації, а matrix3d () дає можливість створювати ілюзію тривимірності в двох вимірах за допомогою CSS.
Мал. 1. Приклад матриці
Ми не будемо далеко забрідати в глибини просунутої алгебри. Ви повинні бути знайомі з декартовой системою координат. Можете також освіжити в пам'яті, як перемножать матриці і вектори (або скористайтеся калькулятором. Типу пропонованого Bluebit.gr).
Важливий для розуміння момент - те, що трансформація примножує матрицю на координати точки (або точок), виражені у вигляді вектора.
Трансформації і системи координат
Коли трансформація застосовується до об'єкта, вона створює локальну систему координат. За замовчуванням початок локальних координат - точка (0,0) - лежить в центрі об'єкта, або на 50% ширини і 50% висоти (рис. 2).
Рис.2. Локальна система координат.
Ми можемо змінити початок локальної системи координат підгонкою властивості transform-origin (рис. 3). Завдання transform-origin. 50px 70px ;, наприклад, поміщає початок координат в 50 пікселях від лівого краю об'єкта і в 70 пікселях від його верху. Трансформації кожної точки в локальній системі координат об'єкту розраховуються щодо цього початку.
Мал. 3. Локальна система координат, з початком в точці (50px, 70px). Також показана точка (30px, 30px).
Браузери роблять за вас ці обчислення кожен раз, коли ви застосовуєте трансформацію. Вам потрібно лише знати, які аргументи можуть допомогти досягти потрібного вам ефекту.
Розрахунок трансформації: математика матриць і векторів
Погляньмо на приклад з використанням матриці 3 на 3 для розрахунку двовимірної трансформації (рис. 4). Таблиця 4 на 4. використовувана для тривимірних трансформацій, працює так само, з додатковими числами для додаткової осі Z.
Мал. 4. Матриця двовимірної CSS-трансформації
Ми можемо записати це як transform: matrix (a, b, c, d, e, f), де літери від a до f - числа, що визначаються типом трансформації, яку ми хочемо застосувати. Матриці - це рецепти тих видів трансформації, які ми хочемо застосувати. Це стане трохи зрозуміліше, коли ми розглянемо кілька прикладів.
Коли ми застосовуємо двовимірну трансформацію, браузер примножує матрицю на вектор [x, y, 1]. Значення x і y - координати конкретної точки в локальному просторі координат.
Щоб знайти координати після трансформації, ми множимо кожен елемент кожного рядка матриці на відповідну йому рядок вектора. Потім складаємо твори (рис. 5).
Мал. 5. Множення матриці на вектор
Я знаю, що це виглядає як купа безглуздих цифр і букв. Але, як зазначено вище, у кожного типу трансформацій - своя власна матриця. Мал. 6 показує матрицю для трансформації зсуву.
Мал. 6. Матриця зсуву
Значення tx і ty - значення, на які має бути зрушене початок координат. Ми також можемо уявити це за допомогою вектора [1 0 0 1 tx ty]. Цей вектор є аргументом для функції matrix (). як показано нижче.
Мал. 7. Об'єкт з глобальними координатами (0,0).
Ми перемістимо цей об'єкт на 150 пікселів по осях x і y, використовуючи початок координат трансформації за замовчуванням. Нижче наведено CSS для цієї трансформації.
До речі, це еквівалентно transform: translate (150px, 150px). Давайте розрахуємо результат цієї трансформації для точки з координатами (220px, 220px) (Рис. 8).
Мал. 8. Обчислення трансформації зсуву.
Мал. 9. Наш об'єкт після застосування трансформації.
Матриця зсуву - особливий випадок. Вона як аддитивна. так і мультипликативна. Більш простим рішенням було б просто додати значення зсуву до значень x- і y -коордінат нашої точки.
Розрахунок тривимірної трансформації
Вище ми розглянули матрицю перенесення 3 на 3. Давайте візьмемо інший приклад, з використанням матриці 4 на 4 для масштабування (рис. 10).
Мал. 10. Матриця 4 на 4 для масштабування.
Тут sx. sy і sz представляють масштабні коефіцієнти по кожній осі. З функцією matrix3d це прийме такий вигляд: transform: matrix3d (sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1).
Будемо продовжувати з тим же об'єктом, що раніше. Зменшимо його масштаб по осях x і y за допомогою функції matrix3d (). як показано нижче.
Це еквівалентно transform: scale3d (0.8, 0.5, 1). Оскільки ми масштабується тільки по осях x і y (отримуючи 2D-трансформацію), ми могли б використовувати також transform: matrix (.8, 0, 0. 5, 0, 0) або scale (.8, .5). Результат трансформації видно на рис. 11.
Мал. 11. Об'єкт 300 на 300 пікселів після застосування трансформації масштабування.
Якщо помножити цю матрицю на координатний вектор [150,150,1] (рис. 12), ми отримаємо такі нові координати нашої точки: (120,75,1).
Мал. 12: Обчислення трансформації масштабування.
Де взяти значення матриць
Значення матриць для кожної функції трансформації наведені як в специфікації Scalable Vector Graphics. так і в специфікації CSS Transforms.
Складові трансформації за допомогою матриць
Нарешті, давайте розглянемо, як створити складову трансформацію - трансформацію, еквівалентну застосування декількох функцій трансформації одночасно. Заради простоти обмежимося двома вимірами. Це означає, що ми будемо використовувати матрицю трансформації 3 на 3 і функцію matrix (). Цією трансформацією ми повернемо наш об'єкт на 45 ° і збільшимо його масштаб в 1,5 рази від вихідного розміру.
Матриця повороту, виражена у вигляді вектора - [cos (a) sin (a) -sin (a) cos (a) 0 0], де a - кут. Як збільшувати або зменшувати знадобиться матриця [sx 0 0 sy 0 0]. Щоб об'єднати їх, помножимо матрицю повороту на матрицю масштабування, як показано на рис. 13 (синус і косинус 45 ° обидва рівні 0.7071).
Мал. 13: Обчислення матриці складовою трансформації.
В CSS це буде виглядати так: transform: matrix (1.0606, 1.0606, -1.0606, 1.0606, 0, 1). Мал. 14 показує результат після застосування трансформації.
Мал. 14: Наш об'єкту має площу 300 на 300 пікселів після масштабування і повороту.
Мал. 15. Застосування трансформації.
Новими координатами нашої точки будуть (199.393px, 432.725px).
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...